d3#timeFormat TypeScript Examples

The following examples show how to use d3#timeFormat. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: LineChart.ts From anichart.js with MIT License

6 votes

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

Example #2

Source File: BarChart.ts From anichart.js with MIT License

5 votes

getDateLabelText(sec: number): string {
    if (this.nonstandardDate) {
      let index = Math.floor(this.secToDate(sec).getTime());
      return this.indexToDate.get(index) ?? "";
    }
    return timeFormat(this.dateFormat)(this.secToDate(sec));
  }

Example #3

Source File: PieChart.ts From anichart.js with MIT License

5 votes

getComponent(sec: number) {
    const res = super.getComponent(sec);
    if (this.showDateLabel) {
      const date = this.secToDate(sec);
      const dateLabel = new Text({
        text: timeFormat(this.dateFormat)(date),
        fillStyle: "#FFF",
        fontSize: 30,
        position: { x: 0, y: 0 },
      });
      res?.children.push(dateLabel);
    }

    const remained = sec % this.keyDurationSec;
    const start = sec - remained;
    const end = start + this.keyDurationSec;
    const comp0 = this.getPieData(start);
    const comp1 = this.getPieData(end);
    const pieData = scaleLinear([start, end], [comp0, comp1])(remained + start);
    const arcGen = arc();
    for (const d of pieData) {
      const path = arcGen
        .endAngle(d.endAngle)
        .padAngle(d.padAngle)
        .startAngle(d.startAngle)
        .innerRadius(this.radius[0])
        .outerRadius(this.radius[1])
        .cornerRadius(this.cornerRadius)
        .padAngle(d.padAngle)({
        innerRadius: 0,
        outerRadius: 0,
        startAngle: 0,
        endAngle: 0,
      });
      const centroid = arcGen.centroid(pieData as any);
      const label = new Text({
        text: d.data[this.idField],
        fontSize: this.labelTextStyle.fontSize,
        lineWidth: this.labelTextStyle.lineWidth,
        font: this.labelTextStyle.font,
        textAlign: "center",
        textBaseline: "middle",
        fillStyle: colorPicker.getColor(d.data[this.idField]),
        fontWeight: this.labelTextStyle.fontWeight,
        strokeStyle: this.labelTextStyle.strokeStyle,
        position: { x: centroid[0], y: centroid[1] },
      });
      const comp = new Path({
        fillStyle: colorPicker.getColor(d.data[this.idField]),
        strokeStyle: "#0000",
        path: path,
      });
      res?.children.push(comp);
      res?.children.push(label);
    }
    return res;
  }

Example #4

Source File: Axis.tsx From covid19-trend-map with Apache License 2.0

5 votes

formatTime = timeFormat('%b')