recharts#ScatterChart TypeScript Examples

Graph = ({context}: {context: Context}) => {
    const analyticsApi = useApi(analyticsApiRef);
    const dataPoints = analyticsApi.incidentsByDay(context);

    return (
        <div id="daily-incidents" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
            <ResponsiveContainer>
                <ScatterChart data={dataPoints}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" name="Day" />
                    <YAxis dataKey="total" name="Total" />
                    <Tooltip content={<FilterZeroTooltip />} />
                    <Scatter name="day" data={dataPoints} fill="#8884d8" />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    );
}

Graph = ({context}: {context: Context}) => {
    const analyticsApi = useApi(analyticsApiRef);
    const dataPoints = analyticsApi.incidentsByHour(context);

    return (
        <div id="hourly-incidents" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
            <ResponsiveContainer>
                <ScatterChart data={dataPoints}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="hour" name="Hour" unit="h" />
                    <YAxis dataKey="total" name="Total" />
                    <Tooltip content={<FilterZeroTooltip />} />
                    <Scatter name="Hour" data={dataPoints} fill="#8884d8" />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    );
}

ChartTraces: React.FunctionComponent<IChartTracesProps> = ({ traces }: IChartTracesProps) => {
  const context = useContext<IContext>(AppContext);

  const data: IData[] = [];

  for (const trace of traces) {
    if (trace.spans.length > 0) {
      data.push({
        name: traceTitle(trace),
        time: Math.floor(trace.spans[0].startTime / 1000),
        duration: getDuration(trace.spans),
        spans: trace.spans.length,
      });
    }
  }

  const formatTime = (time: number): string => {
    const d = new Date(time);
    return `${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(
      -2,
    )}.${('0' + d.getMilliseconds()).slice(-3)}`;
  };

  return (
    <IonRow style={{ height: '200px', width: '100%' }}>
      <IonCol style={{ padding: '0px' }}>
        <ResponsiveContainer>
          <ScatterChart>
            <XAxis
              dataKey="time"
              scale="time"
              type="number"
              name="Time"
              domain={['dataMin', 'dataMax']}
              tickFormatter={formatTime}
            />
            <YAxis type="number" name="Duration" dataKey="duration" unit="ms" />
            <ZAxis type="number" name="Spans" dataKey="spans" range={[100, 1000]} />
            {!isPlatform('hybrid') ? (
              <Tooltip
                cursor={{ stroke: '#949494', strokeWidth: 2 }}
                contentStyle={
                  isDarkMode(context.settings.theme)
                    ? isPlatform('ios')
                      ? { backgroundColor: '1c1c1c', borderColor: '#949494' }
                      : { backgroundColor: '#1A1B1E', borderColor: '#949494' }
                    : { backgroundColor: '#ffffff', borderColor: '#949494' }
                }
                content={<CustomTooltipContent />}
                formatter={(value, name) => {
                  if (name === 'Name') {
                    return [value];
                  } else if (name === 'Time') {
                    return [formatTime(value), 'Time'];
                  } else {
                    return [value, name];
                  }
                }}
              />
            ) : null}
            <Scatter data={data} stroke="#326ce5" fill="#326ce5" shape="circle" />
          </ScatterChart>
        </ResponsiveContainer>
      </IonCol>
    </IonRow>
  );
}

BubbleChart = ({ data }: { data: GroupedData }) => {
  const [chartScale, setChartScale] = useState<'cumulative' | 'daily'>('daily');
  const { t } = useContext(UserContext);
  return (
    <Box width={['100%', '100%', '100%', '100%', 1 / 2]} p={3}>
      <Block
        title={t('accumulation by healthcare district')}
      >
        <ButtonGroup
          spacing={0}
          alignSelf="center"
          display="flex"
          justifyContent="center"
          marginTop="-15px"
        >
          <Button
            size="xs"
            fontFamily="Space Grotesk Regular"
            px={3}
            letterSpacing="1px"
            borderRadius="4px 0px 0px 4px"
            borderWidth="0px"
            isActive={chartScale === 'cumulative'}
            onClick={() => setChartScale('cumulative')}
          >
            {t('cumulative')}
          </Button>
          <Button
            size="xs"
            fontFamily="Space Grotesk Regular"
            px={3}
            letterSpacing="1px"
            borderRadius="0px 4px 4px 0px"
            borderWidth="0px"
            isActive={chartScale === 'daily'}
            onClick={() => setChartScale('daily')}
          >
            {t('daily')}
          </Button>
        </ButtonGroup>
        <Box p={5}>
          {_.map(data, (district, key) => {
            return (
              <ResponsiveContainer key={key} width={'100%'} height={25}>
                <ScatterChart
                  margin={{
                    top: 0,
                    right: 0,
                    bottom: -17,
                    left: 0
                  }}
                >
                  <XAxis
                    type="category"
                    dataKey="date"
                    interval={0}
                    tick={false}
                    axisLine={false}
                    tickLine={false}
                  />
                  <YAxis
                    type="number"
                    dataKey="y"
                    name={key}
                    height={0}
                    interval={0}
                    tick={false}
                    tickLine={false}
                    axisLine={false}
                    label={{ value: key === 'all' ? t('total') : key, position: 'insideLeft' }}
                  />
                  <ZAxis
                    type="number"
                    name="infections"
                    dataKey={
                      chartScale === 'daily' ? 'infectionsDaily' : 'infections'
                    }
                    range={[0, 350]}
                    // @ts-ignore
                    domain={[0, chartScale === 'daily' ? 50 : 350]}
                  />
                  <Tooltip
                    cursor={false}
                    wrapperStyle={{ zIndex: 100 }}
                    isAnimationActive={false}
                    content={(props: any) => (props.payload[0] &&
                      <TooltipWrapper role='tooltip'>
                        <h5>{format(
                          // @ts-ignore
                          utcToZonedTime(props.payload[0].value, 'Europe/Helsinki'),
                          'd.M.yyyy'
                        )}</h5>
                        <p className="label">{t('cases')}: {props.payload[2].value}</p>
                      </TooltipWrapper>
                    )}
                  />
                  <Scatter
                    data={district.timeSeries.infectionDevelopmentData30Days.map(
                      (data: InfectionDevelopmentDataItem) => ({
                        ...data,
                        y: 0
                      })
                    )}
                    fill="#f3858d"
                  />
                </ScatterChart>
              </ResponsiveContainer>
            );
          })}
        </Box>
      </Block>
    </Box>
  );
}