TypeScript time.format方法代码示例

 public parseFormat(value: string): any {
     if (this.format === "%s") {
         return value;
     }
     else if (this.format === "%n") {
         return value;
     }
     else {
         return d3.time.format(this.format).parse(value);
     }
 }

import * as d3 from 'd3';
import { Timezone, Duration, WallTime, month, day, hour } from 'chronoshift';
import { TimeRange } from 'plywood';

const FORMAT_WITH_YEAR = d3.time.format('%b %-d, %Y');
const FORMAT_WITHOUT_YEAR = d3.time.format('%b %-d');

const FORMAT_TIME_OF_DAY_WITHOUT_MINUTES = d3.time.format('%-I%p');
const FORMAT_TIME_OF_DAY_WITH_MINUTES = d3.time.format('%-I:%M%p');

const FORMAT_FULL_MONTH_WITH_YEAR = d3.time.format('%B %Y');

function formatTimeOfDay(d: Date): string {
  return d.getMinutes() ? FORMAT_TIME_OF_DAY_WITH_MINUTES(d) : FORMAT_TIME_OF_DAY_WITHOUT_MINUTES(d);
}

function isCurrentYear(year: number, timezone: Timezone): boolean {
  var nowWallTime = WallTime.UTCToWallTime(new Date(), timezone.toString());
  return nowWallTime.getFullYear() === year;
}

export interface Locale {
  shortDays: string[];
  weekStart: number;
}

export enum DisplayYear {
  ALWAYS, NEVER, IF_DIFF
}

export function getEndWallTimeInclusive(exclusiveEnd: Date, timezone: Timezone) {

export default function financeEODScale(indexAccessor = d => d.idx, dateAccessor = d => d.date, data = [0, 1], backingLinearScale = d3.scale.linear()) {

  var timeScaleSteps = [
    { step: 864e5, f: function(d) { return isDefined(dateAccessor(d)) && true; } },  // 1-day
    { step: 1728e5, f: function(d, i) { return isDefined(dateAccessor(d)) && (i % 2 === 0); } }, // 2-day
    { step: 8380e5, f: function(d, i, arr) {
      if (d.startOfMonth) return true;
      var list = [];
      if ((i - 2) >= 0) list.push(arr[i - 2]);
      if ((i - 1) >= 0) list.push(arr[i - 1]);
      list.push(arr[i]);
      if ((i + 1) <= arr.length - 1) list.push(arr[i + 1]);
      if ((i + 2) <= arr.length - 1) list.push(arr[i + 2]);
      var sm = list
            .map(function(each) { return each.startOfMonth; })
            .reduce(function(prev, curr) {
              return prev || curr;
            });
      return sm ? false : d.startOfWeek;
    } },  // 1-week
    { step: 3525e6, f: function(d) {return d.startOfMonth; } },  // 1-month
    { step: 7776e6, f: function(d) {return d.startOfQuarter; } },  // 3-month
    { step: 31536e6, f: function(d) {return d.startOfYear; } },  // 1-year
    { step: 91536e15, f: function(d) {return isDefined(dateAccessor(d)) && (d.startOfYear && dateAccessor(d).getFullYear() % 2 === 0); } }  // 2-year
  ];
  var timeScaleStepsBisector = d3.bisector(function(d) { return d.step; }).left;
  var bisectByIndex = d3.bisector(function(d) { return indexAccessor(d); }).left;
  var tickFormat = [
    [d3.time.format("%Y"), function(d) { return d.startOfYear; }],
    [d3.time.format("%b %Y"), function(d) { return d.startOfQuarter; }],
    [d3.time.format("%b"), function(d) { return d.startOfMonth; }],
    [d3.time.format("%d %b"), function(d) { return d.startOfWeek; }],
    [d3.time.format("%a %d "), function(/* d */) { return true; }]
  ];
  function formater(d) {
    var i = 0, format = tickFormat[i];
    while (!format[1](d)) format = tickFormat[++i];
    var tickDisplay = format[0](dateAccessor(d));
    // console.log(t;ickDisplay);
    return tickDisplay;
  }

  function scale(x) {
    return backingLinearScale(x);
  }
  scale.isPolyLinear = function() {
    return true;
  };
  scale.invert = function(x) {
    return backingLinearScale.invert(x);
  };
  scale.data = function(x) {
    if (!arguments.length) {
      return data;
    } else {
      data = x;
      // this.domain([data.first().index, data.last().index]);
      this.domain([indexAccessor(data[0]), indexAccessor(data[data.length - 1])]);
      return scale;
    }
  };
  scale.indexAccessor = function(x) {
    if (!arguments.length) return indexAccessor;
    indexAccessor = x;
    return scale;
  };
  scale.dateAccessor = function(x) {
    if (!arguments.length) return dateAccessor;
    dateAccessor = x;
    return scale;
  };
  scale.domain = function(x) {
    if (!arguments.length) return backingLinearScale.domain();
    // console.log("before = %s, after = %s", JSON.stringify(backingLinearScale.domain()), JSON.stringify(x))

    var d = [x[0], x[1]];
    // console.log(d);
    backingLinearScale.domain(d);
    return scale;
  };
  scale.range = function(x) {
    if (!arguments.length) return backingLinearScale.range();
    backingLinearScale.range(x);
    return scale;
  };
  scale.rangeRound = function(x) {
    return backingLinearScale.range(x);
  };
  scale.clamp = function(x) {
    if (!arguments.length) return backingLinearScale.clamp();
    backingLinearScale.clamp(x);
    return scale;
  };
  scale.interpolate = function(x) {
    if (!arguments.length) return backingLinearScale.interpolate();
    backingLinearScale.interpolate(x);
    return scale;
  };
  scale.ticks = function(m) {
    var start, end, count = 0;
//.........这里部分代码省略.........

import * as d3 from 'd3';
import { Timezone, WallTime } from 'chronoshift';
import { TimeRange } from 'plywood';

const formatWithYear = d3.time.format('%b %-d, %Y');
const formatWithoutYear = d3.time.format('%b %-d');

const formatTimeOfDayWithoutMinutes = d3.time.format('%-I%p');
const formatTimeOfDayWithMinutes = d3.time.format('%-I:%M%p');

function formatTimeOfDay(d: Date): string {
  return d.getMinutes() ? formatTimeOfDayWithMinutes(d) : formatTimeOfDayWithoutMinutes(d);
}

function isCurrentYear(year: number, timezone: Timezone): boolean {
  var nowWallTime = WallTime.UTCToWallTime(new Date(), timezone.toString());
  return nowWallTime.getFullYear() === year;
}

export enum DisplayYear {
  ALWAYS, NEVER, IF_DIFF
}

export function formatTimeRange(timeRange: TimeRange, timezone: Timezone, displayYear: DisplayYear): string {
  var { start, end } = timeRange;
  var startWallTime = WallTime.UTCToWallTime(start, timezone.toString());
  var endWallTime = WallTime.UTCToWallTime(end, timezone.toString());
  var endShiftWallTime = WallTime.UTCToWallTime(new Date(end.valueOf() - 1), timezone.toString());

  var showingYear = true;
  var formatted: string;

'use strict';

import * as d3 from 'd3';
import { Timezone, WallTime } from 'chronoshift';

const JOIN = ' - ';

var formatWithYear = d3.time.format('%b %-d, %Y');
var formatWithoutYear = d3.time.format('%b %-d');
var formatTimeOfDay = d3.time.format('%-I%p');

export function formatStartEnd(start: Date, end: Date, timezone: Timezone): string {
  var startWallTime = WallTime.UTCToWallTime(start, timezone.toString());
  var endWallTime = WallTime.UTCToWallTime(end, timezone.toString());
  var endShiftWallTime = WallTime.UTCToWallTime(new Date(end.valueOf() - 1), timezone.toString());

  var formatted: string;
  if (startWallTime.getFullYear() !== endShiftWallTime.getFullYear()) {
    formatted = [formatWithYear(startWallTime), formatWithYear(endShiftWallTime)].join(JOIN);
  } else {
    if (startWallTime.getMonth() !== endShiftWallTime.getMonth() || startWallTime.getDate() !== endShiftWallTime.getDate()) {
      formatted = [formatWithoutYear(startWallTime), formatWithYear(endShiftWallTime)].join(JOIN);
    } else {
      formatted = formatWithYear(startWallTime);
    }
  }

  if (startWallTime.getHours() || endWallTime.getHours()) {
    var timeString: string;
    if (startWallTime.getHours() !== endShiftWallTime.getHours()) {
      timeString = [formatTimeOfDay(startWallTime), formatTimeOfDay(endShiftWallTime)].join(JOIN);

tickFormat: d => time.format('%X')(new Date(d)),

    margin: {top: 25, right: 60, bottom: 50, left: 60},

    // axis enabled
    axis: true,

    // x axis tick count
    xTicks: 6,

    // y range (opacity)
    yRange: [0, 1],

    // x domain (time)
    xDomain: [],

    // time formatter
    timeFormat: d3.time.format("%B %d %I:%M %p"),

    // value formatter
    valueFormat: d3.format('0,000'),

    // custom point width
    pointWidth: null,

    // easing function for transitions
    ease: 'linear'
};

class Margin {
    left:number;
    right:number;
    top:number;

  ngOnInit() {
    let data: Array<QpsChartData> = this.data;
    let t = data[0].time.getTime();


    let el:any = this.elementRef.nativeElement;
    let parentWidth = el.parentElement.offsetWidth;
    let parentHeight = 250;
    let margin = { top: 20, right: 40, bottom: 20, left: 40 };
    let width = parentWidth - margin.left - margin.right;
    let height = parentHeight - margin.top - margin.bottom;

    let x = d3.time.scale()
        .domain([t, data[data.length-1].time.getTime()])
        .range([0, width]);

    let y = d3.scale.linear()
        .domain([0, d3.max(data, d => d.value)])
        .range([height, 0]);

    let xAxis = d3.svg.axis()
        .scale(x)
        .ticks(5)
        .tickFormat(d3.time.format('%H:%M'))
        .orient("bottom");

    let yAxis = d3.svg.axis()
        .scale(y)
        .ticks(4)
        .orient("left");

    let line = d3.svg.line<QpsChartData>()
        .x((d: QpsChartData) => x(new Date(d.time.getTime())))
        .y((d: QpsChartData) => y(d.value))
        .interpolate("linear");

    let svg = d3.select(el).append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)

    svg.selectAll('.axis line, .axis path')
         .style({'stroke': 'Black', 'fill': 'none', 'stroke-width': '2px'});

    let path = svg.append("g")
        .append("path")
        .datum(data)
        .attr("d", line)
        .attr("stroke", "red")
        .attr("stroke-width", 1)
        .attr("fill", "none");

    let avPath = svg.append("g")
        .append("path")
        .datum([data[0], data[data.length-1]])
        .attr("d", line)
        .attr("stroke", "#D8D2D2")
        .attr("stroke-width", 1)
        .attr("fill", "none");
  }

"use strict";

import d3 from "d3";

import financeDiscontinuousScale from "./financeDiscontinuousScale";
import { isDefined, isNotDefined, head, last, slidingWindow, zipper } from "../utils";

const yearFormat = d3.time.format("%Y");
const quarterFormat = d3.time.format("%b %Y");
const monthFormat = d3.time.format("%b");
const weekFormat = d3.time.format("%d %b");
const dayFormat = d3.time.format("%a %d");
const hourFormat = d3.time.format("%_I %p");
const minuteFormat = d3.time.format("%I:%M %p");
const secondFormat = d3.time.format("%I:%M:%S %p");
const milliSecondFormat = d3.time.format("%L");

var levelDefinition = [
  /* 17 */(d, date, i) => d.startOfYear && date.getFullYear() % 2 === 0 && yearFormat,
  /* 16 */(d, date, i) => d.startOfYear && yearFormat,
  /* 15 */(d, date, i) => d.startOfQuarter && quarterFormat,
  /* 14 */(d, date, i) => d.startOfMonth && monthFormat,
  /* 13 */(d, date, i) => d.startOfWeek && weekFormat,
  /* 12 */(d, date, i) => d.startOfDay && i % 2 === 0 && dayFormat,
  /* 11 */(d, date, i) => d.startOfDay && dayFormat,
  /* 10 */(d, date, i) => d.startOfHalfDay && hourFormat, // 12h
  /*  9 */(d, date, i) => d.startOfQuarterDay && hourFormat, // 6h
  /*  8 */(d, date, i) => d.startOfEighthOfADay && hourFormat, // 3h
  /*  7 */(d, date, i) => d.startOfHour && date.getHours() % 2 === 0 && hourFormat, // 2h -- REMOVE THIS
  /*  6 */(d, date, i) => d.startOfHour && hourFormat, // 1h
  /*  5 */(d, date, i) => d.startOf30Minutes && minuteFormat,

 .domain(d3.extent(this.categories.labels, (d: string): Date => {
     return d3.time.format(this.categories.format).parse(d);
 }).reverse())

 xAxis: { tickFormat: d => time.format('%X')(new Date(d)) },