@grafana/data#DateTimeInput TypeScript Examples

The following examples show how to use @grafana/data#DateTimeInput. 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: Graph.tsx    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
renderContextMenu = () => {
    const { series } = this.props;
    const { contextPos, contextItem, isContextVisible } = this.state;

    if (!isContextVisible || !contextPos || !contextItem || series.length === 0) {
      return null;
    }

    // Indicates column(field) index in y-axis dimension
    const seriesIndex = contextItem ? contextItem.series.seriesIndex : 0;
    // Indicates row index in context field values
    const rowIndex = contextItem ? contextItem.dataIndex : undefined;

    const contextDimensions: ContextDimensions<GraphDimensions> = {
      // Described x-axis context item
      xAxis: [seriesIndex, rowIndex],
      // Describes y-axis context item
      yAxis: contextItem ? [contextItem.series.seriesIndex, contextItem.dataIndex] : null,
    };

    const dimensions: GraphDimensions = {
      // time/value dimension columns are index-aligned - see getGraphSeriesModel
      xAxis: createDimension(
        'xAxis',
        series.map(s => s.timeField)
      ),
      yAxis: createDimension(
        'yAxis',
        series.map(s => s.valueField)
      ),
    };

    const formatDate = (date: DateTimeInput, format?: string) => {
      return dateTime(date)?.format(format);
    };

    const closeContext = () => this.setState({ isContextVisible: false });

    const getContextMenuSource = () => {
      return {
        datapoint: contextItem.datapoint,
        dataIndex: contextItem.dataIndex,
        series: contextItem.series,
        seriesIndex: contextItem.series.seriesIndex,
        pageX: contextPos.pageX,
        pageY: contextPos.pageY,
      };
    };

    const contextContentProps: GraphContextMenuProps = {
      x: contextPos.pageX,
      y: contextPos.pageY,
      onClose: closeContext,
      getContextMenuSource: getContextMenuSource,
      formatSourceDate: formatDate,
      dimensions,
      contextDimensions,
    };

    return <GraphContextMenu {...contextContentProps} />;
  };
Example #2
Source File: HistoryListCtrl.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
formatDate(date: DateTimeInput) {
    return this.dashboard.formatDate(date);
  }
Example #3
Source File: HistoryListCtrl.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
formatBasicDate(date: DateTimeInput) {
    const now = this.dashboard.timezone === 'browser' ? dateTime() : toUtc();
    const then = this.dashboard.timezone === 'browser' ? dateTime(date) : toUtc(date);
    return then.from(now);
  }
Example #4
Source File: DashboardModel.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
formatDate(date: DateTimeInput, format?: string) {
    date = isDateTime(date) ? date : dateTime(date);
    format = format || 'YYYY-MM-DD HH:mm:ss';
    const timezone = this.getTimezone();

    return timezone === 'browser' ? dateTime(date).format(format) : toUtc(date).format(format);
  }
Example #5
Source File: DashboardModel.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
getRelativeTime(date: DateTimeInput) {
    date = isDateTime(date) ? date : dateTime(date);

    return this.timezone === 'browser' ? dateTime(date).fromNow() : toUtc(date).fromNow();
  }
Example #6
Source File: module.ts    From grafana-chinese with Apache License 2.0 5 votes vote down vote up 
formatDate = (date: DateTimeInput, format?: string) => {
    return this.dashboard.formatDate.apply(this.dashboard, [date, format]);
  };