@quillsql/react 1.0.0

package/src/Chart.tsx

@@ -0,0 +1,934 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// src/Button.tsx
+
+import React, { useState, useEffect, useContext } from 'react';
+import { twMerge } from 'tailwind-merge';
+import {
+  Card,
+  Text,
+  Metric,
+  Flex,
+  ProgressBar,
+  AreaChart,
+} from '@tremor/react';
+import {
+  Area,
+  CartesianGrid,
+  Legend,
+  ComposedChart as ReChartsAreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Bar,
+  BarChart as ReChartsBarChart,
+} from 'recharts';
+import { format } from 'date-fns';
+import BarList from './BarList';
+import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
+import axios from 'axios';
+import {
+  ClientContext,
+  DashboardContext,
+  DateFilterContext,
+  ThemeContext,
+} from './Context';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+const colorValues = [
+  'slate',
+  'gray',
+  'zinc',
+  'neutral',
+  'stone',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'green',
+  'emerald',
+  'teal',
+  'cyan',
+  'sky',
+  'blue',
+  'indigo',
+  'violet',
+  'purple',
+  'fuchsia',
+  'pink',
+  'rose',
+] as const;
+
+export type Color = (typeof colorValues)[number];
+
+interface ButtonProps {
+  text: string;
+  onClick?: () => void;
+  className?: string;
+}
+
+// const data = [
+//   {
+//     date: 'Jan 22',
+//     SemiAnalysis: 2890,
+//     'The Pragmatic Engineer': 2338,
+//   },
+//   {
+//     date: 'Feb 22',
+//     SemiAnalysis: 2756,
+//     'The Pragmatic Engineer': 2103,
+//   },
+//   {
+//     date: 'Mar 22',
+//     SemiAnalysis: 3322,
+//     'The Pragmatic Engineer': 2194,
+//   },
+//   {
+//     date: 'Apr 22',
+//     SemiAnalysis: 3470,
+//     'The Pragmatic Engineer': 2108,
+//   },
+//   {
+//     date: 'May 22',
+//     SemiAnalysis: 3475,
+//     'The Pragmatic Engineer': 1812,
+//   },
+//   {
+//     date: 'Jun 22',
+//     SemiAnalysis: 3129,
+//     'The Pragmatic Engineer': 1726,
+//   },
+// ];
+
+const data = [
+  {
+    date_trunc: '2022-04-01T00:00:00.000Z',
+    avg_days: 17.8471360852448,
+    median_days: 7.36806134259259,
+  },
+  {
+    date_trunc: '2022-05-01T00:00:00.000Z',
+    avg_days: 17.4874354062884,
+    median_days: 7.9372337962963,
+  },
+  {
+    date_trunc: '2022-06-01T00:00:00.000Z',
+    avg_days: 18.240144813895,
+    median_days: 7.89506365740741,
+  },
+  {
+    date_trunc: '2022-07-01T00:00:00.000Z',
+    avg_days: 16.2354793525833,
+    median_days: 7.548125,
+  },
+  {
+    date_trunc: '2022-08-01T00:00:00.000Z',
+    avg_days: 13.2098485657861,
+    median_days: 5.95611111111111,
+  },
+  {
+    date_trunc: '2022-09-01T00:00:00.000Z',
+    avg_days: 19.5792522310747,
+    median_days: 7.37486111111111,
+  },
+  {
+    date_trunc: '2022-10-01T00:00:00.000Z',
+    avg_days: 27.538275364544,
+    median_days: 13.9421527777778,
+  },
+  {
+    date_trunc: '2022-11-01T00:00:00.000Z',
+    avg_days: 21.6456397342308,
+    median_days: 10.1523958333333,
+  },
+  {
+    date_trunc: '2022-12-01T00:00:00.000Z',
+    avg_days: 15.5662888454861,
+    median_days: 8.40572916666667,
+  },
+  {
+    date_trunc: '2023-01-01T00:00:00.000Z',
+    avg_days: 11.2846224012116,
+    median_days: 5.96854166666667,
+  },
+  {
+    date_trunc: '2023-02-01T00:00:00.000Z',
+    avg_days: 9.69899060044893,
+    median_days: 5.82388310185185,
+  },
+  {
+    date_trunc: '2023-03-01T00:00:00.000Z',
+    avg_days: 7.18273680555556,
+    median_days: 4.78365162037037,
+  },
+];
+
+const valueFormatter = (number: number) => {
+  // const dollar = '$ ' + Intl.NumberFormat('us').format(number).toString();
+  // const final = number > 0 ? dollar.slice(0, -4) + 'k' : '';
+  // return final;
+  // return number.toFixed(0);
+  // return number;
+  const absNumber = Math.abs(number);
+  const formatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD',
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  });
+
+  if (absNumber >= 1000000) {
+    return formatter.format(number / 1000000000).toString() + 'M';
+  } else if (absNumber >= 1000) {
+    return formatter.format(number / 1000).toString() + 'K';
+  } else {
+    return formatter.format(number).toString();
+  }
+};
+
+const yAxisFields = [
+  { field: 'avg_days', label: 'average days' },
+  { field: 'median_days', label: 'median days' },
+];
+
+const labelFormatter = (name: string) => {
+  // return yAxisFields.filter(elem => elem.field === name)[0].label;
+  return name;
+};
+
+export const ChartTooltipFrame = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <div
+    className="bg-white text-sm rounded-md border shadow-lg"
+    // className={twMerge(
+    //   'bg-white',
+    //   'font-normal',
+    //   'border-[12px]',
+    //   'border-[1px]',
+    //   'text-[#212121]'
+    //   // boxShadow.lg
+    // )}
+  >
+    {children}
+  </div>
+);
+
+export interface ChartTooltipRowProps {
+  value: string;
+  name: string;
+  color: Color;
+}
+
+export const ChartTooltipRow = ({
+  value,
+  name,
+  color,
+}: ChartTooltipRowProps) => (
+  <div className="flex items-center justify-between space-x-8">
+    <div className="flex items-center space-x-2">
+      <span
+        style={{ background: color, borderWidth: 2, borderColor: 'white' }}
+        className={twMerge(
+          // 'shrink-0',
+          // 'bg-black',
+          // 'bg-white',
+          // 'border-black',
+          // sizing.sm.height,
+          // sizing.sm.width,
+          'h-3',
+          'w-3',
+          'shadow',
+          'rounded-full'
+          // border.md.all,
+          // boxShadow.md
+        )}
+      />
+      <p
+        // className={twMerge(
+        //   'font-medium tabular-nums text-right whitespace-nowrap',
+        //   'text-[#212121] !important'
+        // )}
+        className="font-medium tabular-nums text-right whitespace-nowrap text-black"
+      >
+        {value}
+      </p>
+    </div>
+    <p
+      className={twMerge(
+        'text-right whitespace-nowrap',
+        // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+        'text-gray-500'
+        // fontWeight.sm
+      )}
+    >
+      {name}
+    </p>
+  </div>
+);
+
+export interface ChartTooltipProps {
+  active: boolean | undefined;
+  payload: any;
+  label: string;
+  colors: string[];
+  valueFormatter: any;
+}
+
+const ChartTooltip = ({
+  active,
+  payload,
+  label,
+  colors,
+  valueFormatter,
+}: ChartTooltipProps) => {
+  if (active && payload) {
+    return (
+      <ChartTooltipFrame>
+        <div
+          className="flex flex-col py-2 px-4 border-b gray-200"
+          // className={
+          // twMerge()
+          // getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder)
+          //   .borderColor,
+          // spacing.twoXl.paddingX,
+          // spacing.sm.paddingY,
+          // border.sm.bottom
+          // }
+        >
+          <p
+            style={{ textAlign: 'left' }}
+            className={twMerge(
+              'text-elem',
+              'text-black',
+              'font-medium',
+              'gray-700'
+              // getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
+              //   .textColor,
+              // fontWeight.md
+            )}
+          >
+            {!isNaN(new Date(label))
+              ? format(new Date(label), 'MMM yyyy')
+              : label}
+            {/* {label} */}
+          </p>
+        </div>
+
+        <div
+          className="px-4 space-y-1 py-2 px-4"
+          // className={
+          // twMerge()
+          // spacing.twoXl.paddingX,
+          // spacing.sm.paddingY,
+          // 'space-y-1'
+          // }
+        >
+          {payload.map(
+            ({ value, name }: { value: number; name: string }, idx: number) => (
+              <ChartTooltipRow
+                key={`id-${idx}`}
+                value={valueFormatter(value)}
+                name={labelFormatter(name)}
+                // color={categoryColors.get(name) ?? BaseColors.Blue}
+                color={colors[idx]}
+              />
+            )
+          )}
+        </div>
+      </ChartTooltipFrame>
+    );
+  }
+  return null;
+};
+
+interface ChartProps {
+  colors: string[];
+  className?: any;
+  chartId?: string;
+  containerStyle?: React.CSSProperties;
+  dashboard: any;
+  dispatch: any;
+  client: any;
+  dateFilter?: any;
+  theme: any;
+}
+
+// @ts-ignore
+function sumByKey(arr, key) {
+  // @ts-ignore
+  return arr.reduce((acc, cur) => {
+    const val = parseInt(cur[key], 10);
+    return isNaN(val) ? acc : acc + val;
+  }, 0);
+}
+
+const Chart = ({ chartId, colors, containerStyle }) => {
+  const { dispatch, dashboard } = useContext(DashboardContext);
+  const { dateFilter } = useContext(DateFilterContext);
+  const [client, _] = useContext(ClientContext);
+  const [theme] = useContext(ThemeContext);
+  return (
+    <ChartUpdater
+      dispatch={dispatch}
+      dashboard={dashboard}
+      dateFilter={dateFilter}
+      chartId={chartId}
+      containerStyle={containerStyle}
+      colors={colors}
+      client={client}
+    />
+  );
+};
+
+const ChartUpdater: React.FC<ChartProps> = ({
+  colors,
+  chartId,
+  className,
+  containerStyle,
+  dashboard,
+  dateFilter,
+  dispatch,
+  client,
+  theme,
+}) => {
+  const [chartConfig, setChartConfig] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!dateFilter.startDate && !dateFilter.endDate) {
+      return;
+    }
+
+    let isSubscribed = true;
+    async function getChartOptions(id: string) {
+      if (isSubscribed) {
+        if (
+          dashboard[id] &&
+          (dashboard[id].startDate === dateFilter.startDate ||
+            dashboard[id].endDate === dateFilter.endDate)
+        ) {
+          const {
+            xAxisField,
+            yAxisFields,
+            xAxisLabel,
+            yAxisLabel,
+            chartType,
+            rows,
+            startDate,
+            endDate,
+          } = dashboard[id];
+          setChartConfig({
+            xAxisField,
+            yAxisFields,
+            xAxisLabel,
+            yAxisLabel,
+            chartType,
+            rows,
+            startDate,
+            endDate,
+          });
+          setLoading(false);
+          return;
+        }
+        const { publicKey, customerId, authToken } = client;
+        // const resp = await axios.get(
+        //   `https://quill-344421.uc.r.appspot.com/dashitem/${publicKey}/${customerId}/${chartId}/`,
+        //   {
+        //     headers: { Authorization: `Bearer ` },
+        //   }
+        // );
+        const { startDate, endDate } = dateFilter;
+        setLoading(true);
+        const resp = await axios.get(
+          'https://quill-344421.uc.r.appspot.com/item',
+          {
+            params: {
+              id: chartId,
+              orgId: customerId,
+              publicKey: publicKey,
+              startDate: startDate.toISOString(),
+              endDate: endDate.toISOString(),
+            },
+          }
+        );
+        const {
+          xAxisField,
+          yAxisFields,
+          xAxisLabel,
+          yAxisLabel,
+          chartType,
+          rows,
+        } = resp.data;
+        setChartConfig({
+          xAxisField,
+          yAxisFields,
+          xAxisLabel,
+          yAxisLabel,
+          chartType,
+          rows,
+          startDate,
+          endDate,
+        });
+        setLoading(false);
+        dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
+      }
+    }
+    if (
+      (chartId && !chartConfig) ||
+      (chartId &&
+        chartConfig &&
+        (chartConfig.startDate !== dateFilter.startDate ||
+          chartConfig.endDate !== dateFilter.endDate))
+    ) {
+      getChartOptions(chartId);
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [chartConfig, dateFilter]);
+
+  if (!chartConfig || loading) {
+    return (
+      <div className="flex flex-col flex-1 h-[100%]" style={containerStyle}>
+        <Skeleton
+          count={1}
+          height={containerStyle?.height}
+          borderRadius={8}
+          // highlightColor="#F7F7F8"
+          highlightColor="#FDFDFD"
+          // baseColor="#F3F4F6"
+          baseColor="#F9F9FA"
+          width={'calc(100% - 50px)'}
+        />
+      </div>
+    );
+  }
+
+  if (chartConfig?.chartType === 'pie') {
+    const { xAxisField, yAxisFields } = chartConfig;
+    return (
+      <PieChart
+        // @ts-ignore
+        containerStyle={containerStyle}
+        data={chartConfig.rows.map(row => {
+          return {
+            ...row,
+            count:
+              parseInt(row[yAxisFields[0].field]) /
+              sumByKey(chartConfig.rows, yAxisFields[0].field),
+          };
+        })}
+        category={yAxisFields[0].field}
+        index={xAxisField}
+        colors={colors}
+      />
+    );
+  }
+
+  if (chartConfig?.chartType === 'bar') {
+    // return <BarList color="#E6DEFC" />;
+    return (
+      <BarChart
+        colors={colors}
+        yAxisFields={chartConfig.yAxisFields}
+        // @ts-ignore
+        data={chartConfig.rows.map(row => {
+          const fieldKeys = chartConfig.yAxisFields.map(elem => elem.field);
+          const newRow = row;
+          for (const key of fieldKeys) {
+            newRow[key] = parseFloat(row[key]);
+          }
+          return newRow;
+        })}
+        xAxisField={chartConfig.xAxisField}
+        xAxisLabel={chartConfig.xAxisLabel}
+        containerStyle={containerStyle}
+      />
+    );
+  }
+
+  if (chartConfig?.chartType === 'metric') {
+    return (
+      <div
+        style={{
+          // fontFamily: theme.fontFamily,
+          fontSize: 32,
+          fontWeight: '600',
+          textOverflow: 'ellipsis',
+          margin: 0,
+          marginLeft: 0,
+          padding: 20,
+          whiteSpace: 'nowrap',
+          display: 'block',
+          maxWidth: '100%',
+          textAlign: 'left',
+          overflow: 'hidden',
+          height: '100%',
+          color: '#394150',
+          // background: 'red',
+        }}
+        className="flex flex-col text-xl"
+      >
+        {formatNumber(
+          chartConfig.rows[0][chartConfig.xAxisField],
+          chartConfig.xAxisLabel
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <LineChart
+      colors={colors}
+      yAxisFields={chartConfig.yAxisFields}
+      // @ts-ignore
+      data={chartConfig.rows}
+      xAxisField={chartConfig.xAxisField}
+      xAxisLabel={chartConfig.xAxisLabel}
+      containerStyle={containerStyle}
+    />
+  );
+};
+
+function formatNumber(num, label) {
+  num = Number(num);
+  if (num < 1000) {
+    return num.toFixed(2) + ' ' + label;
+  }
+  if (num >= 1.0e6) {
+    return '$ ' + Math.round(num / 1.0e6).toLocaleString() + 'M';
+  } else {
+    return '$ ' + Math.round(num / 1.0e6).toLocaleString() + 'M';
+  }
+}
+
+//  @ts-ignore
+function getDomain(data, fields) {
+  //  @ts-ignore
+  const fieldsArray = fields.map(elem => elem.field);
+  const [minValue, maxValue] = data.reduce(
+    //  @ts-ignore
+    ([min, max], item) => [
+      //  @ts-ignore
+      Math.min(min, ...fieldsArray.map(field => item[field])),
+      //  @ts-ignore
+      Math.max(max, ...fieldsArray.map(field => item[field])),
+    ],
+    [Infinity, -Infinity]
+  );
+
+  const adjustedMin = Math.min(minValue, 0);
+  const padding = Math.round(0.2 * (maxValue - minValue));
+  const adjustedMax = maxValue + padding;
+
+  return [adjustedMin, adjustedMax];
+}
+
+function BarChart({
+  colors,
+  yAxisFields,
+  data,
+  containerStyle,
+  xAxisField,
+  xAxisLabel,
+}: {
+  colors: string[];
+  yAxisFields: any[];
+  data: any[];
+  containerStyle?: React.CSSProperties;
+  xAxisField: string;
+  xAxisLabel: string;
+}) {
+  const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
+  return (
+    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+      <ResponsiveContainer width="100%" height={'100%'}>
+        <ReChartsBarChart
+          data={data}
+          // stackOffset={'none'}
+          layout={'horizontal'}
+        >
+          <CartesianGrid
+            strokeDasharray="3 3"
+            horizontal={true}
+            vertical={false}
+          />
+
+          <YAxis
+            // width={56}
+            // width={30}
+            // textAnchor="start"
+            hide={false}
+            axisLine={false}
+            tickLine={false}
+            type="number"
+            // domain={getDomain(data, yAxisFields)}
+            // domain={[0, 150]}
+            tick={{ transform: 'translate(-3, 0)' }}
+            style={{
+              fontSize: '12px',
+              fontFamily: 'Inter; Helvetica',
+            }}
+            // tickFormatter={valueFormatter}
+          />
+          <XAxis
+            hide={false}
+            dataKey={xAxisField}
+            // interval="preserveStartEnd"
+            tick={{ transform: 'translate(0, 6)' }} //padding between labels and axis
+            style={{
+              fontSize: '12px',
+              // TODO: generalize
+              fontFamily: 'Inter; Helvetica',
+              marginTop: '20px',
+            }}
+            tickLine={false}
+            axisLine={false}
+          />
+          {/* <XAxis
+            hide={false}
+            dataKey={xAxisField}
+            interval="preserveStartEnd"
+            tick={{ transform: 'translate(0, 6)' }} //padding between labels and axis
+            style={{
+              fontSize: '12px',
+              // TODO: generalize
+              fontFamily: 'Inter; Helvetica',
+              marginTop: '20px',
+            }}
+            tickLine={false}
+            axisLine={false}
+          />
+          <YAxis
+            width={56}
+            hide={false}
+            axisLine={false}
+            tickLine={false}
+            type="number"
+            // domain={getDomain(data, yAxisFields)}
+            domain={[0, 5]}
+            tick={{ transform: 'translate(-3, 0)' }}
+            style={{
+              fontSize: '12px',
+              fontFamily: 'Inter; Helvetica',
+            }}
+            tickFormatter={valueFormatter}
+          /> */}
+          <Tooltip
+            wrapperStyle={{ outline: 'none' }}
+            isAnimationActive={false}
+            cursor={{ fill: '#d1d5db', opacity: '0.15' }}
+            content={({ active, payload, label }) => {
+              return (
+                <ChartTooltip
+                  active={active}
+                  payload={payload}
+                  label={label}
+                  valueFormatter={valueFormatter}
+                  colors={newColors}
+                />
+              );
+            }}
+            position={{ y: 0 }}
+          />
+          {/* <Legend
+          verticalAlign="top"
+          height={100}
+          content={({ payload }) =>
+            ChartLegend({ payload }, categoryColors, setLegendHeight)
+          }
+        /> */}
+          {yAxisFields.map((elem, index) => (
+            <Bar
+              key={elem.field}
+              name={elem.label}
+              dataKey={elem.field}
+              type="linear"
+              // stackId={stack || relative ? "a" : undefined}
+              fill={newColors[index]}
+              // barSize={20}
+              isAnimationActive={true}
+            />
+          ))}
+        </ReChartsBarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+function LineChart({
+  colors,
+  yAxisFields,
+  data,
+  containerStyle,
+  xAxisField,
+  xAxisLabel,
+}: {
+  colors: string[];
+  yAxisFields: any[];
+  data: any[];
+  containerStyle?: React.CSSProperties;
+  xAxisField: string;
+  xAxisLabel: string;
+}) {
+  // console.log('CONTAINER: ', containerStyle);
+  if (!yAxisFields || !yAxisFields.length) {
+    return null;
+  }
+  return (
+    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+      <ResponsiveContainer width="100%" height={'100%'}>
+        <ReChartsAreaChart data={data}>
+          <CartesianGrid
+            strokeDasharray="3 3"
+            horizontal={true}
+            vertical={false}
+          />
+          <XAxis
+            //   hide={!showXAxis}
+            dataKey={xAxisField}
+            tick={{ transform: 'translate(0, 6)' }}
+            //   ticks={
+            //     startEndOnly
+            //       ? [data[0][index], data[data.length - 1][index]]
+            //       : undefined
+            //   }
+            style={{
+              fontSize: '12px',
+              fontFamily: 'Inter; Helvetica',
+              // color: '#6269E9',
+            }}
+            // interval="preserveStartEnd"
+            interval="preserveStartEnd"
+            // interval={0}
+            tickLine={false}
+            axisLine={false}
+            padding={{ left: 10, right: 10 }}
+            minTickGap={5}
+            tickFormatter={tick => format(new Date(tick), 'MMM yyyy')}
+          />
+          <YAxis
+            // textAnchor="left"
+            // tickMargin={0}
+            // width={56}
+            // width={30}
+            //   hide={!showYAxis}
+            axisLine={false}
+            tickLine={false}
+            type="number"
+            //   domain={yAxisDomain as AxisDomain}
+            domain={getDomain(data, yAxisFields)}
+            tick={{ transform: 'translate(-3, 0)' }}
+            style={{
+              fontSize: '12px',
+              fontFamily: 'Inter; Helvetica',
+            }}
+            tickFormatter={valueFormatter}
+          />
+          <Tooltip
+            wrapperStyle={{ outline: 'none' }}
+            isAnimationActive={false}
+            cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
+            content={({ active, payload, label }) => {
+              return (
+                <ChartTooltip
+                  active={active}
+                  payload={payload}
+                  label={label}
+                  valueFormatter={valueFormatter}
+                  colors={colors}
+                />
+              );
+            }}
+            position={{ y: 0 }}
+          />
+          {/* <Legend
+          verticalAlign="top"
+          height={100}
+          content={({ payload }) =>
+            ChartLegend({ payload }, categoryColors, setLegendHeight)
+          }
+        /> */}
+
+          {/* <defs>
+          <linearGradient id={'colorUj'} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor={'#E14F62'} stopOpacity={0.4} />
+            <stop
+              offset="95%"
+              stopColor={'rgba(0,0,0,0)'}
+              stopOpacity={0}
+            />
+          </linearGradient>
+        </defs> */}
+
+          {yAxisFields.map((elem, index) => (
+            <defs key={`defs${elem}`}>
+              <linearGradient
+                id={`gradient${index}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop offset="5%" stopColor={colors[index]} stopOpacity={0.4} />
+                <stop
+                  offset="95%"
+                  stopColor={'rgba(0,0,0,0)'}
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+          ))}
+
+          {/* {categories.map(category => {
+          console.log('category: ', category);
+          return ( */}
+          {yAxisFields.map((elem, index) => (
+            <Area
+              key={elem.field}
+              name={elem.label}
+              type="linear"
+              dataKey={elem.field}
+              stroke={colors[index]}
+              // if hide area
+              // fill="transparent"
+              fill={`url(#gradient${index})`}
+              strokeWidth={2}
+              dot={false}
+              isAnimationActive={true}
+            />
+          ))}
+
+          {/* <Area
+          key="The Pragmatic Engineer"
+          name="The Pragmatic Engineer"
+          type="linear"
+          dataKey="The Pragmatic Engineer"
+          stroke={'#E14F62'}
+          fill={`url(#colorUj)`}
+          strokeWidth={2}
+          dot={false}
+          isAnimationActive={true}
+        /> */}
+          {/* <Bar
+          dataKey="The Pragmatic Engineer"
+          type="linear"
+          barSize={20}
+          isAnimationActive={true}
+          fill="#d958e5"
+        /> */}
+
+          {/* );
+        })} */}
+        </ReChartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+export default Chart;