feat: add matrix component

Author: tmkx

src/components.tsx

@@ -7,6 +7,7 @@ import type {
   MarkAreaComponentOption,
   MarkLineComponentOption,
   MarkPointComponentOption,
+  MatrixComponentOption,
   PolarComponentOption,
   TitleComponentOption,
   ToolboxComponentOption,
@@ -21,6 +22,7 @@ import {
   MarkAreaComponent,
   MarkLineComponent,
   MarkPointComponent,
+  MatrixComponent,
   PolarComponent,
   TitleComponent,
   ToolboxComponent,
@@ -62,6 +64,8 @@ export const MarkLine = /*#__PURE__*/ defineComponent<MarkLineComponentOption>(M
 
 export const MarkPoint = /*#__PURE__*/ defineComponent<MarkPointComponentOption>(MarkPointComponent);
 
+export const Matrix = /*#__PURE__*/ defineComponent<MatrixComponentOption>(MatrixComponent);
+
 export const Polar = /*#__PURE__*/ defineComponent<PolarComponentOption>(PolarComponent);
 
 export const Title = /*#__PURE__*/ defineComponent<TitleComponentOption>(TitleComponent);

src/index.ts

@@ -7,6 +7,7 @@ export {
   MarkArea,
   MarkLine,
   MarkPoint,
+  Matrix,
   Polar,
   Title,
   Toolbox,

stories/line.stories.tsx

@@ -10,6 +10,7 @@ import {
   MarkArea,
   MarkLine,
   MarkPoint,
+  Matrix,
   PieChart,
   Polar,
   Title,
@@ -2243,3 +2244,153 @@ export function DatasetLink() {
     </LineChart>
   );
 }
+
+export function MatrixSparkline() {
+  const _matrixDimensionData = {
+    x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    y: [
+      { value: '8:00\n~\n10:00' },
+      { value: '10:00\n~\n12:00' },
+      { value: '12:00\n~\n14:00', size: 55 },
+      { value: '14:00\n~\n16:00' },
+      { value: '16:00\n~\n18:00' },
+      { value: '18:00\n~\n20:00' },
+    ],
+  };
+  const _yBreakTimeIndex = 2; // '12:00 - 14:00',
+  const _seriesFakeDataLength = 365;
+
+  function makeId(xidx: number, yidx: number) {
+    return `${xidx}|${yidx}`;
+  }
+  function eachMatrixCell(cb: (xval: string, yval: string, xidx: number, yidx: number) => void) {
+    _matrixDimensionData.y.forEach((yvalItem, yidx) => {
+      const yval = yvalItem.value;
+      if (yidx === _yBreakTimeIndex) {
+        return;
+      }
+      _matrixDimensionData.x.forEach((xval, xidx) => {
+        cb(xval, yval, xidx, yidx);
+      });
+    });
+  }
+  function generateFakeSeriesData(dayCount: number, xidx: number, _yidx: number) {
+    const dayStart = new Date('2025-05-05T00:00:00.000Z'); // Monday
+    dayStart.setDate(xidx + 5);
+    const timeStart = dayStart.getTime();
+    const sevenDay = 7 * 1000 * 3600 * 24;
+    const cellData = [];
+    let lastVal = +(Math.random() * 300).toFixed(0);
+    let turnCount = null;
+    let sign = -1;
+    for (let idx = 0; idx < dayCount; idx++) {
+      if (turnCount == null || idx >= turnCount) {
+        turnCount = idx + Math.round((dayCount / 4) * ((Math.random() - 0.5) * 0.1));
+        sign = -sign;
+      }
+      const deltaMag = 50;
+      const delta = +(Math.random() * deltaMag - deltaMag / 2 + (sign * deltaMag) / 3).toFixed(0);
+      const val = Math.max(0, (lastVal += delta));
+      const xTime = timeStart + idx * sevenDay;
+      const dataXVal = echarts.time.format(xTime, '{yyyy}-{MM}-{dd}', true);
+      cellData.push([dataXVal, val]);
+    }
+    return cellData;
+  }
+
+  const grid: GridOption[] = [];
+  const xAxis: XAXisOption[] = [];
+  const yAxis: YAXisOption[] = [];
+  const series: LineSeriesOption[] = [];
+
+  eachMatrixCell((xval, yval, xidx, yidx) => {
+    const id = makeId(xidx, yidx);
+    grid.push({
+      id: id,
+      coordinateSystem: 'matrix',
+      coord: [xval, yval],
+      top: 10,
+      bottom: 10,
+      left: 'center',
+      width: '90%',
+      containLabel: true,
+    });
+    xAxis.push({
+      type: 'category',
+      id: id,
+      gridId: id,
+      axisTick: { show: false },
+      axisLabel: { show: false },
+      axisLine: { show: false },
+      splitLine: { show: false },
+    });
+    yAxis.push({
+      id: id,
+      gridId: id,
+      interval: Number.MAX_SAFE_INTEGER,
+      scale: true,
+      axisLabel: {
+        showMaxLabel: true,
+        fontSize: 9,
+      },
+      axisLine: { show: false },
+      axisTick: { show: false },
+    });
+    series.push({
+      xAxisId: id,
+      yAxisId: id,
+      type: 'line',
+      symbol: 'none',
+      lineStyle: { width: 1 },
+      data: generateFakeSeriesData(_seriesFakeDataLength, xidx, yidx),
+    });
+  });
+
+  return (
+    <LineChart style={{ width: 480, height: 512 }} grid={grid} xAxis={xAxis} yAxis={yAxis} series={series}>
+      <Legend legend={{}} />
+      <Tooltip tooltip={{ trigger: 'axis' }} />
+      <DataZoom
+        dataZoom={[
+          // @ts-expect-error xAxisIndex: 'all'
+          { type: 'slider', xAxisIndex: 'all', left: '10%', right: '10%', bottom: 30, height: 30, throttle: 120 },
+          // @ts-expect-error xAxisIndex: 'all'
+          { type: 'inside', xAxisIndex: 'all', throttle: 120 },
+        ]}
+      />
+      <Matrix
+        matrix={{
+          x: {
+            data: _matrixDimensionData.x,
+            levelSize: 40,
+            label: { fontSize: 16, color: '#555' },
+          },
+          y: {
+            data: _matrixDimensionData.y,
+            levelSize: 70,
+            label: { fontSize: 14, color: '#777' },
+          },
+          corner: {
+            data: [{ coord: [-1, -1], value: 'Time' }],
+            label: { fontSize: 16, color: '#777' },
+          },
+          body: {
+            data: [
+              {
+                coord: [null, _yBreakTimeIndex],
+                coordClamp: true,
+                mergeCells: true,
+                value: 'Break',
+                label: { color: '#999', fontSize: 16 },
+              },
+            ],
+          },
+          top: 30,
+          bottom: 80,
+          width: '90%',
+          left: 'center',
+        }}
+      />
+    </LineChart>
+  );
+}