recharts#ZAxis TypeScript Examples

function Chart({ displayData, plotNode, valueNode, showMin }: {
  displayData: Point[],
  plotNode: NumNode,
  valueNode: NumNode,
  showMin: boolean
}) {
  const plotBaseUnit = KeyMap.unit(plotNode.info?.key)
  const valueUnit = KeyMap.unit(valueNode.info?.key)
  return <ResponsiveContainer width="100%" height={600}>
    <ComposedChart data={displayData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="x" scale="linear" unit={plotBaseUnit} domain={["auto", "auto"]} tick={{ fill: 'white' }} type="number" tickFormatter={n => n > 10000 ? n.toFixed() : n.toFixed(1)} />
      <YAxis name="DMG" domain={["auto", "auto"]} unit={valueUnit} allowDecimals={false} tick={{ fill: 'white' }} type="number" />
      <ZAxis dataKey="y" range={[3, 25]} />
      <Legend />
      <Scatter name="Optimization Target" dataKey="y" fill="#8884d8" line lineType="fitting" isAnimationActive={false} />
      {showMin && <Line name="Minimum Stat Requirement Threshold" dataKey="min" stroke="#ff7300" type="stepBefore" connectNulls strokeWidth={2} isAnimationActive={false} />}
    </ComposedChart>
  </ResponsiveContainer>
}

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>
  );
}