個人で運用しているアプリケーションでグラフライブラリのVictoryを使っていてバージョンが古くなっていたので32.3.x から35.4.xにあげてみました。
大きく仕様に変化はなかったようで、型エラーを直していくだけで対応が完了しました。
VictoryLine
線のスタイルやラベルのコールバックの仕様が変わっている様です。
- strokeDasharray が配列ではなくなっていて、型としては StringOrNumberOrCallback に変更されている。
- labels のコールバックの値がデータではなく、lineのオブジェクトになってる。
import { VictoryLine } from "victory"; const dottedLine = { data: { strokeDasharray: 1, // StringOrNumberOrCallbackになったので[1, 1] みたいなしてはできない } }; const barData = [{ x: 1, y: 1 }]; // 前の様にしたければdatumに置き換える const lineLabel = (value: { datum: { x: number; y: number; } }): number | null => { return (value.datum.y > 0 ? value.datum.y : null); }; <VictoryLine style={dottedLine} data={barData} labels={lineLabel} />
VictoryChart
domainPaddingの型指定が変わった様です。
export type PaddingType = number | [number, number]; export type DomainPaddingPropType = | PaddingType | { x?: PaddingType; y?: PaddingType; };
値をリテラルで指定していたので、[0, 15] みたいな指定が number[] で解釈されていました。
import { VictoryChart, VictoryBar } from "victory"; const domainPadding = { x: [15, 15] as [number, number], // 型指定はDomainPaddingPropTypeなので y: [0, 15] as [number, number], }; const barData = [{ x: 1, y; 1 }]; <VictoryChart domainPadding={domainPadding}> <VictoryBar data={barData} /> </VictoryChart>
VictoryAxis
grid.strokeのコールバック関数の引数が変わった様です。
strokeのコールバックはtickの値が引数になっていたので、args: CallbackArgsに置き換えました。
import { CallbackArgs } from "victory-core"; import { VictoryAxis } from "victory"; const valueTicks = [0, 5, 10, 15, 20]; const valueAxisStyle = { grid: { stroke: (args: CallbackArgs) => (args.tick === 0 ? colorTransparent : axisAndTickColor), // 前はtick: numberだった }, }; <VictoryAxis dependentAxis tickValues={valueTicks} style={valueAxisStyle} />