d3#scaleTime TypeScript Examples

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

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

Axis: React.FC<Props> = ({ svgContainerData, scales }) => {
    const drawXAxis = () => {
        const { dimension, g } = svgContainerData;

        const { height, width } = dimension;

        const mainGroup = select(g);

        const { x } = scales;

        const domain = x.domain();
        const startDateParts = domain[0].split('-').map((d) => +d);
        const startDate = new Date(
            startDateParts[0],
            startDateParts[1] - 1,
            startDateParts[2]
        );

        const endDateParts = domain[domain.length - 1]
            .split('-')
            .map((d) => +d);
        const endDate = new Date(
            endDateParts[0],
            endDateParts[1] - 1,
            endDateParts[2]
        );

        const xScale = scaleTime()
            .range([0, width])
            .domain([startDate, endDate]);

        const xAxis = axisBottom(xScale)
            // .ticks(timeMonth)
            .tickFormat((date: Date) => {
                return formatTime(date);
            });
        // .tickValues(d=>{})
        // .tickSizeInner(-(height))
        // .tickPadding(9)

        const xAxisLabel = mainGroup.selectAll('.x.axis');

        if (!xAxisLabel.size()) {
            mainGroup
                .append('g')
                .attr('class', 'x axis')
                .attr('transform', 'translate(0,' + height + ')')
                .call(xAxis);
        } else {
            xAxisLabel
                .attr('transform', 'translate(0,' + height + ')')
                .call(xAxis);
        }
    };

    const drawYAxis = () => {
        const { g, dimension } = svgContainerData;

        const { width } = dimension;

        const { y } = scales;

        const mainGroup = select(g);

        const yAxis = axisLeft(y)
            .ticks(3)
            .tickSizeInner(-width)
            .tickPadding(5)
            .tickFormat((num) => {
                return numberFns.abbreviateNumber(+num, 0);
            });

        const yAxisLabel = mainGroup.selectAll('.y.axis');

        if (!yAxisLabel.size()) {
            mainGroup.append('g').attr('class', 'y axis').call(yAxis);
        } else {
            yAxisLabel.call(yAxis);
        }
    };

    React.useEffect(() => {
        if (svgContainerData && scales) {
            drawXAxis();
            drawYAxis();
        }
    }, [svgContainerData, scales]);

    React.useEffect(()=>{
        console.log('draw axis')
    })

    return null;
}