github.com/iqoqo/nomad@v0.11.3-0.20200911112621-d7021c74d101/ui/stories/charts/line-chart.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  import EmberObject from '@ember/object';
     4  import { on } from '@ember/object/evented';
     5  import moment from 'moment';
     6  
     7  import DelayedArray from '../utils/delayed-array';
     8  
     9  export default {
    10    title: 'Charts|Line Chart',
    11  };
    12  
    13  let data1 = [
    14    { year: 2010, value: 10 },
    15    { year: 2011, value: 10 },
    16    { year: 2012, value: 20 },
    17    { year: 2013, value: 30 },
    18    { year: 2014, value: 50 },
    19    { year: 2015, value: 80 },
    20    { year: 2016, value: 130 },
    21    { year: 2017, value: 210 },
    22    { year: 2018, value: 340 },
    23  ];
    24  
    25  let data2 = [
    26    { year: 2010, value: 100 },
    27    { year: 2011, value: 90 },
    28    { year: 2012, value: 120 },
    29    { year: 2013, value: 130 },
    30    { year: 2014, value: 115 },
    31    { year: 2015, value: 105 },
    32    { year: 2016, value: 90 },
    33    { year: 2017, value: 85 },
    34    { year: 2018, value: 90 },
    35  ];
    36  
    37  export let Standard = () => {
    38    return {
    39      template: hbs`
    40        <h5 class="title is-5">Line Chart</h5>
    41        <div class="block" style="height:100px; width: 400px;">
    42          {{#if lineChartData}}
    43            <LineChart @data={{lineChartData}} @xProp="year" @yProp="value" @chartClass="is-primary" />
    44          {{/if}}
    45        </div>
    46        <div class="block" style="height:100px; width: 400px;">
    47          {{#if lineChartMild}}
    48            <LineChart @data={{lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-info" />
    49          {{/if}}
    50        </div>
    51        `,
    52      context: {
    53        lineChartData: DelayedArray.create(data1),
    54        lineChartMild: DelayedArray.create(data2),
    55      },
    56    };
    57  };
    58  
    59  export let FluidWidth = () => {
    60    return {
    61      template: hbs`
    62        <h5 class="title is-5">Fluid-width Line Chart</h5>
    63        <div class="block" style="height:250px;">
    64          {{#if lineChartData}}
    65            <LineChart @data={{lineChartData}} @xProp="year" @yProp="value" @chartClass="is-danger" />
    66          {{/if}}
    67        </div>
    68        <div class="block" style="height:250px;">
    69          {{#if lineChartMild}}
    70            <LineChart @data={{lineChartMild}} @xProp="year" @yProp="value" @chartClass="is-warning" />
    71          {{/if}}
    72        </div>
    73        <p class="annotation">A line chart will assume the width of its container. This includes the dimensions of the axes, which are calculated based on real DOM measurements. This requires a two-pass render: first the axes are placed with their real domains (in order to capture width and height of tick labels), second the axes are adjusted to make sure both the x and y axes are within the height and width bounds of the container.</p>
    74        `,
    75      context: {
    76        lineChartData: DelayedArray.create(data1),
    77        lineChartMild: DelayedArray.create(data2),
    78      },
    79    };
    80  };
    81  
    82  export let LiveData = () => {
    83    return {
    84      template: hbs`
    85        <h5 class="title is-5">Live data Line Chart</h5>
    86        <div class="block" style="height:250px">
    87          {{#if controller.lineChartLive}}
    88            <LineChart @data={{controller.lineChartLive}} @xProp="ts" @yProp="val" @timeseries={{true}} @chartClass="is-primary" @xFormat={{controller.secondsFormat}} />
    89          {{/if}}
    90        </div>
    91        `,
    92      context: {
    93        controller: EmberObject.extend({
    94          startTimer: on('init', function() {
    95            this.set(
    96              'timer',
    97              setInterval(() => {
    98                this.incrementProperty('timerTicks');
    99  
   100                let ref = this.lineChartLive;
   101                ref.addObject({ ts: Date.now(), val: Math.random() * 30 + 20 });
   102                if (ref.length > 60) {
   103                  ref.splice(0, ref.length - 60);
   104                }
   105              }, 500)
   106            );
   107          }),
   108  
   109          willDestroy() {
   110            clearInterval(this.timer);
   111          },
   112  
   113          lineChartLive: [],
   114  
   115          secondsFormat() {
   116            return date => moment(date).format('HH:mm:ss');
   117          },
   118        }).create(),
   119      },
   120    };
   121  };
   122  
   123  export let Gaps = () => {
   124    return {
   125      template: hbs`
   126        <h5 class="title is-5">Line Chart data with gaps</h5>
   127        <div class="block" style="height:250px">
   128          {{#if lineChartGapData}}
   129            <LineChart @data={{lineChartGapData}} @xProp="year" @yProp="value" @chartClass="is-primary" />
   130          {{/if}}
   131        </div>
   132        `,
   133      context: {
   134        lineChartGapData: DelayedArray.create([
   135          { year: 2010, value: 10 },
   136          { year: 2011, value: 10 },
   137          { year: 2012, value: null },
   138          { year: 2013, value: 30 },
   139          { year: 2014, value: 50 },
   140          { year: 2015, value: 80 },
   141          { year: 2016, value: null },
   142          { year: 2017, value: 210 },
   143          { year: 2018, value: 340 },
   144        ]),
   145      },
   146    };
   147  };