質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
データ構造

データ構造とは、データの集まりをコンピュータの中で効果的に扱うために、一定の形式に系統立てて格納する形式を指します。(配列/連想配列/木構造など)

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

677閲覧

typescriptで型に合うようにデータを変形したいです

otaaa

総合スコア19

データ構造

データ構造とは、データの集まりをコンピュータの中で効果的に扱うために、一定の形式に系統立てて格納する形式を指します。(配列/連想配列/木構造など)

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/05/18 13:29

編集2020/05/19 04:28

前提・実現したいこと

nivoの棒グラフを使いたくて、そのデータの形に合うように変形したいです。
具体的にはprojectクラスのデータを変形させてlineData型にする関数をつくりたいです。
(lineData型がnivoの棒グラフのデータの型です)

class Project { constructor( public id: number | null public name: string, public amount: number, public startAt: Date, public endAt: Date, ) {}
type lineData = { id: string | number; data: [ { x: number | string | Date; y: number | string | Date; }, ]; };

試したこと

下のコードではプロジェクトの金額を月ごとに分けたデータをlineData型にしようとしています。
下のコードだと画像のようになってしまい、lineDataのdataが1個1個入っているのでそれを改善して、理想の形になるようにしたいです。

下のコードの実行結果
画像1
理想の形

[ { id: "プロジェクト1", data: [ { x: "2020-03", y: 95 }, { x: "2020-04", y: 95 }, { x: "2020-05", y: 95 }, ] }, { id: "プロジェクト2", data: [ { x: "2020-03", y: 70 }, { x: "2020-04", y: 70 }, { x: "2020-05", y: 70 }, ] }, { id: "プロジェクト3", data: [ { x: "2020-03", y: 75 }, { x: "2020-04", y: 75 }, { x: "2020-05", y: 75 }, ] } ];

typescript

1import { range} from 'lodash'; 2import { DateTime } from 'luxon'; 3 4class Project { 5 constructor( 6 public id: number | null 7 public name: string, 8 public amount: number, 9 public startAt: Date, 10 public endAt: Date, 11 ) {} 12 13type lineData = { 14 id: string | number; 15 data: [ 16 { 17 x: number | string | Date; 18 y: number | string | Date; 19 }, 20 ]; 21}; 22export class aaaa { 23 24static projectTolineData(project: Project): lineData[] { 25 const startAt = DateTime.fromJSDate(project.startAt).set({ 26 day: 1, 27 }); 28 const endAt = DateTime.fromJSDate(project.endAt).set({ 29 day: 28, 30 }); 31 const months = range( 32 0, 33 Math.floor(endAt.diff(startAt, ['months']).months) + 1, 34 ).map(i => { 35 return startAt.plus({ month: i }); 36 }); 37 return months.map(m => { 38 return { 39 id: project.name, 40 data: [{ 41 x: m.toFormat('yyyy-MM'), 42 y: Math.floor( 43 project.amount/ months.length, 44 ), 45 }], 46 }; 47 }); 48 } 49} 50 51

補足情報(FW/ツールのバージョンなど)

分かる方がいましたら教えていただけると嬉しいです。
なるべく非破壊的なやり方で教えていただきたいです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

static aaa( stackData: StackedSalesChartDatum[], ): StackedSalesChartDatum[] { return chain(stackData) .groupBy('id') .values() .map(d => d.reduce<StackedSalesChartDatum>((ac, current) => { ac.data.push(current.data[0]); return Object.assign(current, ac); }, d[0]), ) .value(); }

このような関数を使えば大丈夫でした
また、lineDataのDataのところを

data: { x: number | string | Date; y: number | string | Date; },[] ;

こうすればうまくいきました

投稿2020/05/29 03:53

otaaa

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問