refactor(dashboard): the chart component is now cleaned up and easier to extend

apps/dashboard/src/modals/OverviewChartDetails.tsx

@@ -1,4 +1,4 @@
-import { ChartRoot } from '@/components/report/chart';
+import { ReportChart } from '@/components/report-chart';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 import type { IChartProps } from '@openpanel/validation';
@@ -15,7 +15,13 @@ const OverviewChartDetails = (props: Props) => {
       <ModalHeader title={props.chart.name} />
       <ScrollArea className="-m-6 max-h-[calc(100vh-200px)]">
         <div className="p-6">
-          <ChartRoot {...props.chart} limit={999} chartType="bar" />
+          <ReportChart
+            report={{
+              ...props.chart,
+              limit: 999,
+              chartType: 'bar',
+            }}
+          />
         </div>
       </ScrollArea>
     </ModalContent>

apps/dashboard/src/modals/event-details.tsx

@@ -1,4 +1,4 @@
-import { ChartRootShortcut } from '@/components/report/chart';
+import { ReportChartShortcut } from '@/components/report-chart/shortcut';
 import { KeyValue } from '@/components/ui/key-value';
 import { useAppParams } from '@/hooks/useAppParams';
 import {
@@ -193,7 +193,7 @@ export default function EventDetails({ id }: Props) {
                 Show all
               </button>
             </div>
-            <ChartRootShortcut
+            <ReportChartShortcut
               projectId={event.projectId}
               chartType="histogram"
               events={[