前提・実現したいこと
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個入っているのでそれを改善して、理想の形になるようにしたいです。
[ { 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/ツールのバージョンなど)
分かる方がいましたら教えていただけると嬉しいです。
なるべく非破壊的なやり方で教えていただきたいです。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。