github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/stories/charts/primitives.stories.js (about)

     1  import hbs from 'htmlbars-inline-precompile';
     2  
     3  export default {
     4    title: 'Charts/Primitives',
     5  };
     6  
     7  export let Tooltip = () => ({
     8    template: hbs`
     9      <h5 class="title is-5">Single Entry</h5>
    10      <div class="mock-hover-region" style="width:300px;height:100px">
    11        <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{this.dataSingle}} as |series|>
    12          <li>
    13            <span class="label"><span class="color-swatch swatch-reds" />{{series.name}}</span>
    14            <span class="value">{{series.value}}</span>
    15          </li>
    16        </ChartPrimitives::Tooltip>
    17      </div>
    18  
    19      <h5 class="title is-5">Multiple Entries</h5>
    20      <div class="mock-hover-region" style="width:300px;height:100px">
    21        <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{take 4 this.dataMultiple}} as |series datum index|>
    22          <li>
    23            <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
    24            <span class="value">{{datum.value}}</span>
    25          </li>
    26        </ChartPrimitives::Tooltip>
    27      </div>
    28  
    29      <h5 class="title is-5">Active Entry</h5>
    30      <div class="mock-hover-region" style="width:300px;height:100px">
    31        <ChartPrimitives::Tooltip @active={{true}} @style={{this.style}} @data={{take 4 this.dataMultiple}} class="with-active-datum" as |series datum index|>
    32          <li class="{{if (eq series.name "Three") "is-active"}}">
    33            <span class="label"><span class="color-swatch swatch-reds swatch-reds-{{index}}" />{{series.name}}</span>
    34            <span class="value">{{datum.value}}</span>
    35          </li>
    36        </ChartPrimitives::Tooltip>
    37      </div>
    38  
    39      <h5 class="title is-5">Color Scales</h5>
    40      <div class="multiples is-left-aligned with-spacing">
    41        {{#each this.scales as |scale|}}
    42          <div class="mock-hover-region" style="width:300px;height:200px">
    43            {{scale}}
    44            <ChartPrimitives::Tooltip @active={{true}} @style="left:70%;top:75%" @data={{this.dataMultiple}} as |series datum index|>
    45              <li>
    46                <span class="label"><span class="color-swatch swatch-{{scale}} swatch-{{scale}}-{{index}}" />{{series.name}}</span>
    47                <span class="value">{{datum.value}}</span>
    48              </li>
    49            </ChartPrimitives::Tooltip>
    50          </div>
    51        {{/each}}
    52      </div>
    53    `,
    54    context: {
    55      style: 'left:70%;top:50%;',
    56      dataSingle: [{ series: { name: 'Example', value: 12 } }],
    57      dataMultiple: [
    58        { series: { name: 'One' }, datum: { value: 12 }, index: 0 },
    59        { series: { name: 'Two' }, datum: { value: 24 }, index: 1 },
    60        { series: { name: 'Three' }, datum: { value: 36 }, index: 2 },
    61        { series: { name: 'Four' }, datum: { value: 48 }, index: 3 },
    62        { series: { name: 'Five' }, datum: { value: 60 }, index: 4 },
    63        { series: { name: 'Six' }, datum: { value: 72 }, index: 5 },
    64        { series: { name: 'Seven' }, datum: { value: 84 }, index: 6 },
    65      ],
    66      scales: ['reds', 'blues', 'ordinal'],
    67    },
    68  });