feat(ui-dashboard): chart foundation — ECharts base, legend, theme, icons (0.2.0)

packages/ui-dashboard/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "@sentio/ui-dashboard",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Dashboard UI components for the Sentio platform, decoupled from backend services.",
   "exports": {
     ".": {
@@ -36,9 +36,11 @@
     "@headlessui/react": "1.7.7",
     "@sentio/chain": "workspace:^",
     "@sentio/ui-core": "workspace:^",
+    "echarts": "^6.0.0",
     "immer": "^11.1.8",
     "lodash": "^4.17.21",
-    "react-icons": "^5.5.0"
+    "react-icons": "^5.5.0",
+    "react-resize-detector": "^12.3.0"
   },
   "peerDependencies": {
     "react": ">=18",

packages/ui-dashboard/src/charts/ChartLegend.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { Tooltip } from '../common/Tooltip'
+import { EChartsHandle } from './EchartsBase'
+
+const COLOR_UNSELECTED = '#dddddd'
+
+interface Props {
+  legend: string[]
+  legendSelected: Record<string, boolean>
+  returnedSeries?: number
+  totalSeries?: number
+  onRendered: (v: boolean) => void
+  chartHandle?: EChartsHandle
+}
+
+export const ChartLegend = ({
+  legend,
+  legendSelected,
+  returnedSeries,
+  totalSeries,
+  onRendered,
+  chartHandle
+}: Props) => {
+  const rootRef = useRef<HTMLDivElement>(null)
+  const [tooltipText, setTooltipText] = useState('')
+  const [tooltipReferenceElement, setTooltipReferenceElement] =
+    useState<HTMLDivElement>()
+
+  useEffect(() => {
+    if (!rootRef.current) {
+      return
+    }
+    const offsetHeight = rootRef?.current?.parentElement?.offsetHeight || 0
+    chartHandle?.resize({
+      height: offsetHeight - rootRef.current.offsetHeight
+    })
+    onRendered(true)
+  }, [chartHandle, onRendered])
+
+  const onToggleLegend = useCallback(
+    (event: React.MouseEvent, name: string, _seriesIndex: number) => {
+      if (event.altKey) {
+        legend.forEach((n) => {
+          chartHandle?.toggleLegend(n, n === name)
+        })
+        return
+      }
+      chartHandle?.toggleLegend(name)
+    },
+    [chartHandle, legendSelected]
+  )
+
+  const highlightSeries = useCallback(
+    (index: number) => {
+      chartHandle?.highlightSeries({ seriesIndex: index })
+    },
+    [chartHandle]
+  )
+
+  const unhighlightSeries = useCallback(() => {
+    chartHandle?.highlightSeries(undefined)
+  }, [chartHandle])
+
+  const onToggleAll = useCallback(
+    (
+      legend: string[],
+      legendSelected: Record<string, boolean>,
+      chartHandle?: EChartsHandle
+    ) => {
+      const allSelected = legend.every((name) => legendSelected[name])
+      legend.forEach((name) => {
+        chartHandle?.toggleLegend(name, !allSelected)
+      })
+    },
+    [legend, legendSelected, chartHandle]
+  )
+
+  const list = legend.map((name, index) => {
+    const selected = legendSelected[name] || legendSelected[name] === undefined
+    return (
+      <div
+        className="flex cursor-pointer items-center gap-0.5 whitespace-nowrap"
+        key={name + index}
+        data-tip={name}
+        onClick={(event) => onToggleLegend(event, name, index)}
+        onDoubleClick={(event) => {
+          onToggleAll(legend, legendSelected, chartHandle)
+        }}
+        onMouseEnter={(e) => {
+          if (legendSelected[name] !== false) {
+            // Only highlight when the current legend is active.
+            highlightSeries(index)
+          }
+          setTooltipReferenceElement(e.currentTarget)
+          setTooltipText(name)
+        }}
+        onMouseLeave={() => {
+          unhighlightSeries()
+          setTooltipReferenceElement(undefined)
+          setTooltipText('')
+        }}
+      >
+        <span
+          className="rounded-xs h-2.5 w-2.5"
+          style={{
+            backgroundColor: selected
+              ? chartHandle?.getSeriesColor({ seriesName: name })
+              : COLOR_UNSELECTED
+          }}
+        />
+        <span
+          className="truncate text-xs"
+          style={{
+            maxWidth: '12em',
+            color: selected ? undefined : COLOR_UNSELECTED
+          }}
+        >
+          {name}
+        </span>
+      </div>
+    )
+  })
+
+  return (
+    <div
+      ref={rootRef}
+      className="text-text-foreground-secondary flex max-h-10 flex-wrap gap-x-3 gap-y-1 overflow-y-auto px-2 text-[13px] leading-[18px]"
+    >
+      {list}
+      {returnedSeries && totalSeries && returnedSeries < totalSeries ? (
+        <div className="font-semibold" style={{ color: '#6B7280' }}>
+          showing {returnedSeries} of {totalSeries} series
+        </div>
+      ) : null}
+      <Tooltip referenceElement={tooltipReferenceElement} text={tooltipText} />
+    </div>
+  )
+}

packages/ui-dashboard/src/charts/EchartsBase.stories.tsx

@@ -0,0 +1,61 @@
+import type { Story } from '@ladle/react'
+import { ReactEChartsBase, type EChartsOption } from './EchartsBase'
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+
+const lineOption: EChartsOption = {
+  legend: { data: ['Requests', 'Errors'] },
+  tooltip: { trigger: 'axis' },
+  grid: { left: 40, right: 16, top: 32, bottom: 24 },
+  xAxis: { type: 'category', data: days },
+  yAxis: { type: 'value' },
+  series: [
+    {
+      id: 'requests',
+      name: 'Requests',
+      type: 'line',
+      smooth: true,
+      data: [120, 200, 150, 80, 70, 110, 130]
+    },
+    {
+      id: 'errors',
+      name: 'Errors',
+      type: 'line',
+      smooth: true,
+      data: [5, 12, 8, 3, 2, 6, 4]
+    }
+  ]
+}
+
+const barOption: EChartsOption = {
+  legend: { data: ['Volume'] },
+  tooltip: { trigger: 'axis' },
+  grid: { left: 40, right: 16, top: 32, bottom: 24 },
+  xAxis: { type: 'category', data: days },
+  yAxis: { type: 'value' },
+  series: [
+    {
+      id: 'volume',
+      name: 'Volume',
+      type: 'bar',
+      data: [220, 182, 191, 234, 290, 330, 310]
+    }
+  ]
+}
+
+export const Line: Story = () => (
+  <div className="w-[42rem] p-8">
+    <ReactEChartsBase option={lineOption} style={{ height: 280 }} />
+  </div>
+)
+Line.meta = {
+  description:
+    'ReactEChartsBase rendering a themed line chart (with ChartLegend)'
+}
+
+export const Bar: Story = () => (
+  <div className="w-[42rem] p-8">
+    <ReactEChartsBase option={barOption} style={{ height: 280 }} />
+  </div>
+)
+Bar.meta = { description: 'Bar chart variant' }