feat: add stack chart type

Author: moonrailgun

src/client/components/chart/TimeEventChart.tsx

@@ -20,6 +20,8 @@ import {
 } from '../ui/chart';
 import { useStrokeDasharray } from '@/hooks/useStrokeDasharray';
 
+export type TimeEventChartType = 'area' | 'stack';
+
 const defaultChartConfig: ChartConfig = {
   pv: {
     label: 'PV',
@@ -35,11 +37,13 @@ export const TimeEventChart: React.FC<{
   unit: DateUnit;
   chartConfig?: ChartConfig;
   drawGradientArea?: boolean;
+  chartType?: TimeEventChartType;
 }> = React.memo((props) => {
   const {
     className,
     drawGradientArea = true,
     chartConfig = defaultChartConfig,
+    chartType = 'area',
   } = props;
   const { colors } = useTheme();
   const [calcStrokeDasharray, strokes] = useStrokeDasharray({});
@@ -53,6 +57,8 @@ export const TimeEventChart: React.FC<{
     Object.keys(chartConfig)
   );
 
+  const stacked = chartType === 'stack';
+
   return (
     <ChartContainer className={className} config={chartConfig}>
       <AreaChart
@@ -123,6 +129,7 @@ export const TimeEventChart: React.FC<{
               hide={!selectedItem.includes(key)}
               type="monotone"
               dataKey={key}
+              stackId={stacked ? '1' : undefined}
               stroke={
                 chartConfig[key].color ??
                 (colors.chart as any)[key] ??

src/client/components/insights/ChartRender.tsx

@@ -20,6 +20,8 @@ import { useTranslation } from '@i18next-toolkit/react';
 import { DelayRender } from '../DelayRender';
 import { SearchLoadingView } from '../loading/Searching';
 import { get, groupBy, merge, omit, values } from 'lodash-es';
+import { ChartTypeSelection } from './ChartTypeSelection';
+import { useWatch } from '@/hooks/useWatch';
 
 interface ChartRenderProps {
   insightId: string;
@@ -135,6 +137,7 @@ export const ChartRender: React.FC<ChartRenderProps> = React.memo((props) => {
                 unit={dateUnit}
                 chartConfig={chartConfig}
                 drawGradientArea={false}
+                chartType={chartType}
               />
             </div>
           </ResizablePanel>
@@ -167,7 +170,14 @@ export const ChartRender: React.FC<ChartRenderProps> = React.memo((props) => {
           }}
         />
 
-        <DateUnitSelection value={dateUnit} onChange={setDateUnit} />
+        <div className="flex gap-2">
+          <DateUnitSelection
+            allowMinute={allowMinute}
+            value={dateUnit}
+            onChange={setDateUnit}
+          />
+          <ChartTypeSelection value={chartType} onChange={setChartType} />
+        </div>
       </div>
 
       {mainEl}

src/client/components/insights/ChartTypeSelection.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../ui/select';
+import { TimeEventChartType } from '../chart/TimeEventChart';
+import { useTranslation } from '@i18next-toolkit/react';
+import { LuChartArea, LuChartLine } from 'react-icons/lu';
+
+interface ChartTypeSelectionProps {
+  value: TimeEventChartType;
+  onChange: (val: TimeEventChartType) => void;
+}
+export const ChartTypeSelection: React.FC<ChartTypeSelectionProps> = React.memo(
+  (props) => {
+    const { value, onChange } = props;
+    const { t } = useTranslation();
+
+    return (
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger className="w-[60px]">
+          <LuChartArea />
+        </SelectTrigger>
+        <SelectContent align="end">
+          <SelectItem value="area" className="flex gap-1">
+            {t('Area')}
+          </SelectItem>
+          <SelectItem value="stack" className="flex gap-1">
+            {t('Stack')}
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    );
+  }
+);
+ChartTypeSelection.displayName = 'ChartTypeSelection';