adding custom colors to chart

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx

@@ -0,0 +1,96 @@
+import React, {useMemo, useState} from 'react';
+import {useCallsForQueryCharts} from './callsTableQuery';
+
+import {GridFilterModel, GridSortModel} from '@mui/x-data-grid-pro';
+
+import {WFHighLevelCallFilter} from './callsTableFilter';
+import {DEFAULT_FILTER_CALLS} from './CallsTable';
+import {getCostFromCostData} from '../CallPage/cost';
+import GradientAreaChart from './Charts';
+
+type CallsChartsProps = {
+  startTime?: number;
+  endTime?: number;
+  entity: string;
+  project: string;
+  filterModelProp: GridFilterModel;
+  filter: WFHighLevelCallFilter;
+  //   setFilterModel?: (newModel: GridFilterModel) => void;
+};
+
+export const CallsCharts = ({
+  startTime,
+  endTime,
+  entity,
+  project,
+  filter,
+  filterModelProp,
+}: // filterModel,
+// filter,
+CallsChartsProps) => {
+  //   <FilterPanel
+  //   filterModel={filterModel}
+  //   columnInfo={filterFriendlyColumnInfo}
+  //   setFilterModel={setFilterModel}
+  //   selectedCalls={selectedCalls}
+  //   clearSelectedCalls={clearSelectedCalls}
+  // />
+  const [filterModel, setFilterModel] = useState<GridFilterModel>(
+    filterModelProp ?? DEFAULT_FILTER_CALLS
+  );
+  const columns = useMemo(() => ['summary.weave.costs', 'started_at'], []);
+  const columnSet = useMemo(() => new Set(columns), [columns]);
+  const sortCalls: GridSortModel = useMemo(
+    () => [{field: 'started_at', sort: 'asc'}],
+    []
+  );
+  const calls = useCallsForQueryCharts(
+    entity,
+    project,
+    filter,
+    filterModel,
+    0,
+    1000,
+    columns, // need to select columns for performance. not working??
+    columnSet,
+    sortCalls
+  );
+  const callsLoading = calls.loading;
+  const [callsResult, setCallsResult] = useState(calls.result);
+  const [callsTotal, setCallsTotal] = useState(calls.total);
+
+  const costAndTimeData = useMemo(() => {
+    return calls.result
+      .filter(
+        call =>
+          call.traceCall?.started_at !== undefined &&
+          getCostFromCostData(call.traceCall?.summary?.weave?.costs ?? {})
+            .costNumeric !== undefined
+      )
+      .map(call => ({
+        value: getCostFromCostData(call.traceCall?.summary?.weave?.costs ?? {})
+          .costNumeric,
+        timestamp: call.traceCall?.started_at ?? '',
+      }));
+  }, [calls.result]);
+
+  // Sum up the cost data
+
+  console.log('Cost data:', filter, filterModel, calls, costAndTimeData, calls);
+
+  // const costSums = costconsData !== undefined ? sumCostDataForCostTable(costData) : [];
+  // console.log(costData2, callsResult);
+  return (
+    <>
+      <div>My Chart</div>
+      <GradientAreaChart costAndTimeData={costAndTimeData} />
+      {/* <FilterPanel
+        filterModel={filterModel}
+        columnInfo={filterFriendlyColumnInfo}
+        setFilterModel={setFilterModel}
+        selectedCalls={selectedCalls}
+        clearSelectedCalls={clearSelectedCalls}
+      /> */}
+    </>
+  );
+};

weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/Charts.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts';
+import moment from 'moment'; // Optional, for formatting timestamps
+import {
+  TEAL_300,
+  TEAL_400,
+  TEAL_500,
+  TEAL_600,
+} from '../../../../../../common/css/color.styles';
+
+const data = [
+  {timestamp: 1665619200000, value: 30}, // Example timestamps (in milliseconds)
+  {timestamp: 1665705600000, value: 20},
+  {timestamp: 1665792000000, value: 50},
+  {timestamp: 1665878400000, value: 40},
+  {timestamp: 1665964800000, value: 70},
+  {timestamp: 1666051200000, value: 60},
+];
+
+type GradientAreaChartProps = {
+  costAndTimeData: {
+    value: number | undefined;
+    timestamp: string;
+  }[];
+};
+
+export const GradientAreaChart = ({
+  costAndTimeData,
+}: GradientAreaChartProps) => {
+  const uniqueMonths = Array.from(
+    new Set(costAndTimeData.map(d => moment(d.timestamp).format('YYYY-MM')))
+  );
+  const formattedData = costAndTimeData.map(d => ({
+    ...d,
+    timestamp: moment(d.timestamp).valueOf(), // Convert to milliseconds
+  }));
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <AreaChart
+        data={formattedData}
+        margin={{top: 10, right: 30, left: 0, bottom: 0}}>
+        <defs>
+          <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={TEAL_300} stopOpacity={0.3} />
+            <stop offset="95%" stopColor={TEAL_300} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis
+          dataKey="timestamp"
+          //   scale="time"
+          type="number"
+          domain={['auto', 'auto']}
+          tickFormatter={tick => moment(tick).format('MMM YYYY')}
+          interval="preserveStartEnd"
+        />
+
+        <YAxis />
+        <Tooltip
+          labelFormatter={label => moment(label).format('MMM DD, YYYY')} // Format tooltip
+        />
+        <Area
+          type="monotone"
+          dataKey="value"
+          stroke={TEAL_500}
+          fillOpacity={1}
+          fill="url(#colorValue)"
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default GradientAreaChart;