fix(frontend): fix time on MkChart's story (#13958)

Author: zyoshoka

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<typeof MkChart>;
 export const NotesTotalChart = {
 	...Base,
 	args: {
+		...Base.args,
 		src: 'notes-total',
 	},
 } satisfies StoryObj<typeof MkChart>;
 export const DriveChart = {
 	...Base,
 	args: {
+		...Base.args,
 		src: 'drive',
 	},
 } satisfies StoryObj<typeof MkChart>;

packages/frontend/src/components/MkChart.vue

@@ -77,13 +77,21 @@ const props = withDefaults(defineProps<{
 	stacked?: boolean;
 	bar?: boolean;
 	aspectRatio?: number | null;
+	nowForChromatic?: number;
 }>(), {
 	args: undefined,
 	limit: 90,
 	detailed: false,
 	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<InstanceType<typeof MkChartLegend>>();
@@ -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: {