d3#max TypeScript Examples

getScaleX(currentData: any[]) {
    let scaleX: ScaleLinear<number, number, never>;
    let domain: number[];
    if (this.domain != undefined) {
      domain = this.domain(currentData);
    } else if (this.visualRange != "history") {
      const [_, max] = extent(currentData, (d) => d[this.valueField]);
      domain = [0, max];
    } else {
      domain = [0, max(this.data, (d) => d[this.valueField])];
    }
    scaleX = scaleLinear(domain, [
      0,
      this.shape.width -
        this.margin.left -
        this.barPadding -
        this.labelPlaceholder -
        this.totalRankPlaceHolder -
        this.margin.right -
        this.valuePlaceholder,
    ]);
    return scaleX;
  }

setup(stage: Stage) {
    super.setup(stage);
    this.setData();
    this.setMeta();
    this.setDefaultAniTime(stage);
    this.setDataScales();
    this.setAlphaScale();
    // 初始化整体最值
    this.totallyMax = max(this.data, (d) => d[this.valueField]);
    this.totallyMin = min(this.data, (d) => d[this.valueField]);
    // 初始化历史最值
    this.historyMax = this.totallyMin;
    this.historyMin = this.totallyMin;
    // 用于计算坐标
    this.currentMax = this.historyMin;
    this.currentMin = this.historyMax;

    if (!this.shape) {
      this.shape = {
        width: stage.canvas.width,
        height: stage.canvas.height,
      };
    }
  }

setup(stage: Stage) {
    super.setup(stage);
    this.xTickFormat = (n: number | { valueOf(): number }) => {
      return timeFormat(this.dateFormat)(this.secToDate(n));
    };
    // Calculate label placeholder
    const textModel = new Text({
      fontSize: this.labelSize,
      font,
    });
    const labelMaxWidth =
      max(this.data, (d) => {
        textModel.text = this.labelFormat(d[this.idField], this.meta, d);
        return canvasHelper.measure(textModel)?.width ?? 0;
      }) ?? 0;
    this.labelPlaceholder = labelMaxWidth;
  }

private getPieData(sec: number) {
    const currentData = [...this.dataScales.values()].map((scale) => {
      return scale(sec);
    });
    const minRadio = this.minRadio / 360;
    const sumValue = sum(currentData, (d) => d[this.valueField]);
    const minValue = sumValue * minRadio;
    const pieGen = pie()
      .padAngle((Math.PI / 180) * this.padAngle)
      .value((d) => max([d[this.valueField], minValue]));

    currentData.sort((a, b) => {
      if (Number.isNaN(b[this.valueField])) {
        return -1;
      } else if (Number.isNaN(a[this.valueField])) {
        return 1;
      } else {
        return b[this.idField] - a[this.idField];
      }
    });
    const pieData = pieGen(currentData);

    return pieData;
  }

getNightAsDays = (nights: Night[]) => {
  const firstDate = min([...nights.map((night) => new Date(night.startDate))])
  const lastDate = max([...nights.map((night) => new Date(night.endDate))])

  const days = eachDayOfInterval({
    start: subDays(new Date(), 30),
    end: new Date(), // lastDate
  })

  return days.map((day) => ({
    date: day.toISOString(),
    night: nights
      .filter((night) => matchDayAndNight(night.startDate, day.toISOString()))
      .map((night) => {
        const startDifference = differenceInMilliseconds(
          new Date(night.startDate),
          startOfDay(new Date(day))
        )

        const newStartDate = addMilliseconds(
          startOfDay(new Date()),
          startDifference
        )

        const newEndDate = addMinutes(newStartDate, night.totalDuration)

        return {
          ...night,
          startDate: newStartDate.valueOf(),
          endDate: newEndDate.valueOf(),
        }
      }),
  }))
}

SleepTimeChart: FC = () => {
  const data = useAppSelector(getNightsAsDays)
  const daysToShow = data.length
  const chartWidth = (barWidth + 10) * daysToShow + paddingLeft + paddingRight

  const xDomain: Date[] = extent(data, (date) => new Date(date.date)) as Date[]

  const yDomain: number[] = [
    min(data, (date) =>
      min(date.night, (night) =>
        subHours(new Date(night.startDate), 1).valueOf()
      )
    ) as number,
    max(data, (date) =>
      max(date.night, (night) => addHours(new Date(night.endDate), 1).valueOf())
    ) as number
  ]

  const scaleX = scaleTime()
    .domain(xDomain)
    .range([paddingLeft, chartWidth - paddingRight])

  const scaleY = scaleTime()
    .domain(yDomain)
    .nice()
    .range([10, chartHeight - 80])

  const yTicks = scaleY.ticks(5)
  const xTicks = scaleX.ticks(daysToShow)

  return (
    <Card>
      <Title>STAT.TREND</Title>

      <ScrollContainer>
        <YTicksContainer
          pointerEvents="auto"
          width={chartWidth}
          height={chartHeight}>
          <YTicks scaleY={scaleY} chartWidth={chartWidth} ticks={yTicks} />
        </YTicksContainer>
        <ScrollView
          style={{ transform: [{ scaleX: -1 }] }}
          horizontal
          showsHorizontalScrollIndicator={false}>
          <View style={{ transform: [{ scaleX: -1 }] }}>
            <Svg width={chartWidth} height={chartHeight}>
              {/* <TargetBars
                start={bedtimeWindow}
                onPress={select}
                barWidth={barWidth}
                scaleX={scaleX}
                scaleY={scaleY}
                data={normalizedSleepData}
              /> */}
              <SleepBars
                onPress={() => undefined}
                barWidth={barWidth}
                scaleX={scaleX}
                scaleY={scaleY}
                data={data}
              />

              <XTicks
                chartHeight={chartHeight}
                scaleX={scaleX}
                barWidth={barWidth}
                ticks={xTicks}
              />
            </Svg>
          </View>
        </ScrollView>
      </ScrollContainer>
    </Card>
  )
}

getLongestBedTime = createSelector(
  getBedTimeNights,
  (longestNight) => max(longestNight, (item) => item.inBedDuration)
)

getLongestSleepTime = createSelector(
  getAsleepNights,
  (longestNight) => max(longestNight, (item) => item.asleepDuration)
)

SleepChart: FC<ChartProps> = ({ data }) => {
  const ref = useRef<HTMLDivElement>(null)

  useLayoutEffect(() => {
    ref.current?.scrollBy({ left: ref.current.offsetWidth })
  }, [])

  const { normalizedData } = useMemo(
    () => ({
      normalizedData: getNightAsDays(data),
    }),
    [data]
  )

  const daysToShow = normalizedData.length
  const chartWidth = (barWidth + 10) * daysToShow + paddingLeft + paddingRight

  const xDomain: Date[] = extent(
    normalizedData,
    (date) => new Date(date.date)
  ) as Date[]

  const yDomain: number[] = [
    min(normalizedData, (date) =>
      min(date.night, (night) =>
        subHours(new Date(night.startDate), 1).valueOf()
      )
    ) as number,
    max(normalizedData, (date) =>
      max(date.night, (night) => addHours(new Date(night.endDate), 1).valueOf())
    ) as number,
  ]

  const scaleX = scaleTime()
    .domain(xDomain)
    .range([paddingLeft, chartWidth - paddingRight])

  const scaleY = scaleTime()
    .domain(yDomain)
    .nice()
    .range([10, chartHeight - 80])

  const yTicks = scaleY.ticks(10)
  const xTicks = scaleX.ticks(daysToShow)

  return (
    <Container ref={ref}>
      <svg width={chartWidth} height={chartHeight}>
        <XTicks
          chartHeight={chartHeight}
          scaleX={scaleX}
          barWidth={barWidth}
          ticks={xTicks}
        />
        <SleepBars
          barWidth={barWidth}
          scaleX={scaleX}
          scaleY={scaleY}
          data={normalizedData}
        />

        <YTicks scaleY={scaleY} chartWidth={chartWidth} ticks={yTicks} />
      </svg>
    </Container>
  )
}

getComponent(sec: number) {
    const res = new Component({
      position: this.position,
      alpha: this.alphaScale(sec - this.fadeTime[0] - this.freezeTime[0]),
    });
    if (this.aniTime[0] > sec) return null;
    this.scales = this.getScalesBySec(sec);
    const { xAxis, yAxis } = this.getAxis(sec, this.scales);
    const lineGen = line()
      .defined((d: any) => !isNaN(d[this.valueField]))
      .x((d: any) => this.scales.x(this.secToDate.invert(d[this.dateField])))
      .y((d: any) => this.scales.y(d[this.valueField]));
    const areaGen = area()
      .defined((d: any) => !isNaN(d[this.valueField]))
      .x((d: any) => this.scales.x(this.secToDate.invert(d[this.dateField])))
      .y0(this.shape.height)
      .y1((d: any) => this.scales.y(d[this.valueField]));
    const lineArea = new Rect({
      clip: true,
      position: {
        x: this.margin.left + this.yAxisWidth + this.xAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.yAxisPadding,
      },
      shape: {
        width:
          this.shape.width -
          this.margin.left -
          this.margin.right -
          this.yAxisWidth -
          this.yAxisPadding -
          this.labelPlaceholder -
          this.labelPadding -
          this.pointerR,
        height:
          this.shape.height -
          this.margin.top -
          this.margin.bottom -
          this.xAxisHeight -
          this.xAxisPadding,
      },
      fillStyle: "#0000",
    });
    const points = new Component({
      position: {
        x: this.margin.left + this.yAxisWidth + this.yAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.xAxisPadding,
      },
    });

    const labels = new Component({
      position: {
        x: this.margin.left + this.yAxisWidth + this.yAxisPadding,
        y: this.margin.top + this.xAxisHeight + this.xAxisPadding,
      },
    });
    const maxX = max(this.scales.x.range());
    // 找不到最大值说明啥数据都没有，直接返回
    if (!maxX) return res;
    this.dataGroupByID.forEach((v: any[], k) => {
      const line = new Path();
      const color = colorPicker.getColor(k);
      line.strokeStyle = color;
      line.path = lineGen.curve(curveMonotoneX)(v);
      line.lineWidth = 3;
      lineArea.children.push(line);

      const areaPath = areaGen.curve(curveMonotoneX)(v);

      // 如果画不出Path直接返回
      if (!areaPath) return;

      const currentY = this.findY(areaPath, maxX);
      const point = new Arc({
        fillStyle: color,
        radius: this.pointerR,
        alpha: currentY !== undefined ? 1 : 0,
        position: { x: maxX, y: currentY },
      });

      const maxValue = this.scales.y.invert(currentY);
      if (maxValue > this.historyMax) {
        this.historyMax = maxValue;
      } else if (maxValue < this.historyMin) {
        this.historyMin = maxValue;
      }
      points.children.push(point);
      const data = new Map();
      data.set(this.valueField, maxValue);
      // 如果找不到值，则说明此时并没有数据
      if (currentY) {
        const label = new Text({
          text: this.labelFormat(k, this.meta, data),
          fontSize: this.labelSize,
          font,
          textAlign: "left",
          textBaseline: "middle",
          position: {
            x: maxX + this.labelPadding + this.pointerR,
            y: currentY,
          },
          fillStyle: color,
        });
        labels.children.push(label);
      }
    });
    res.children.push(lineArea);
    res.children.push(points);
    if (this.showAxis) {
      if (this.showXAxis) res.children.push(xAxis);
      if (this.showYAxis) res.children.push(yAxis);
    }
    res.children.push(labels);
    return res;
  }

Chart: React.FC<Props> = ({
    data,
    chartType,
    visible,
    tooltipData,
    setTooltipData
})=>{

    const fieldName = FieldNameByActiveTrend[chartType];

    const shouldShowBars = chartType === 'new-cases' || chartType === 'death';

    const data4Bars = useMemo(() => {
        if(!shouldShowBars){
            return null;
        }

        return getChartData(data, fieldName);
    }, [ data, fieldName ]);

    const data4Line = useMemo(() => {
        return getChartData(data, fieldName, shouldShowBars);
    }, [ data, fieldName ]);

    const xDomain = useMemo(() => {
        return data.map((d) => d.attributes.dt);
    }, [ data ]);

    const yDomain = useMemo(() => {
        const values = data.map((d) => {
            return d.attributes[fieldName];
        });
        const yMax = max(values) || 1;
        return [0, yMax];
    }, [ data, fieldName ]);

    return visible ? (
        <SvgContainer
            key={chartType}
            xDomain={xDomain}
            yDomain={yDomain}
        >
            <Axis />

            <Title chartType={chartType} />

            { data4Bars ? (
                <Bar
                    fillColor={ThemeStyle['theme-color-khaki-dark']}
                    data={data4Bars}
                />
            ) : (
                <></>
            )}

            <Line
                strokeColor={ThemeStyle['theme-color-red']}
                data={data4Line}
            />

            {tooltipData && tooltipData.parentChart === chartType ? (
                <Tooltip data={tooltipData.data} />
            ) : (
                <></>
            )}

            <MouseEventsRect
                data={data}
                onHover={(data) => {
                    if (!data) {
                        setTooltipData(undefined);
                    }

                    setTooltipData({
                        data,
                        parentChart: chartType,
                    });
                }}
            />
        </SvgContainer>
    ) : null ;
}