diff --git a/packages/frontend/src/components/MkChart.stories.impl.ts b/packages/frontend/src/components/MkChart.stories.impl.ts index d1d17f6dc0..3bae703245 100644 --- a/packages/frontend/src/components/MkChart.stories.impl.ts +++ b/packages/frontend/src/components/MkChart.stories.impl.ts @@ -76,6 +76,7 @@ const Base = { args: { src: 'federation', span: 'hour', + nowForChromatic: 1716263640000, }, parameters: { layout: 'centered', @@ -100,18 +101,21 @@ const Base = { export const FederationChart = { ...Base, args: { + ...Base.args, src: 'federation', }, } satisfies StoryObj; export const NotesTotalChart = { ...Base, args: { + ...Base.args, src: 'notes-total', }, } satisfies StoryObj; export const DriveChart = { ...Base, args: { + ...Base.args, src: 'drive', }, } satisfies StoryObj; diff --git a/packages/frontend/src/components/MkChart.vue b/packages/frontend/src/components/MkChart.vue index a823a0ec4b..3816bca348 100644 --- a/packages/frontend/src/components/MkChart.vue +++ b/packages/frontend/src/components/MkChart.vue @@ -77,6 +77,7 @@ const props = withDefaults(defineProps<{ stacked?: boolean; bar?: boolean; aspectRatio?: number | null; + nowForChromatic?: number; }>(), { args: undefined, limit: 90, @@ -84,6 +85,13 @@ const props = withDefaults(defineProps<{ stacked: false, bar: false, aspectRatio: null, + + /** + * @desc Overwrites current date to fix background lines of chart. + * @ignore Only used for Chromatic. Don't use this for production. + * @see https://github.com/misskey-dev/misskey/pull/13830#issuecomment-2155886151 + */ + nowForChromatic: undefined, }); const legendEl = shallowRef>(); @@ -106,7 +114,8 @@ const getColor = (i) => { return colorSets[i % colorSets.length]; }; -const now = new Date(); +// eslint-disable-next-line vue/no-setup-props-destructure +const now = props.nowForChromatic != null ? new Date(props.nowForChromatic) : new Date(); let chartInstance: Chart | null = null; let chartData: { series: {