Commit b6b10da2 authored by David Pisek's avatar David Pisek 2️⃣
Browse files

fix(storybook): knobs for chart stories 

Currently, none of the chart-related storybook entries have their
knobs working correctly.

The values can be changed, but updates don't reflect in the rendered
result.

This commit changes the affected stories to use the pattern suggested
by the storybook-knobs documentation to fix the behavior.
parent f0806e6f

components/charts/area/area.stories.js

+60 −63
Original line number Diff line number Diff line
@@ -34,43 +34,47 @@ const template = `<gl-area-chart 
  :data="data"

  :option="option"

  :thresholds="thresholds"

  :includeLegendAvgMax="includeLegendAvgMax"

/>`;



function generateData({

function generateProps({

  data = defaultData,

  option = defaultOptions,

  thresholds = [],

  includeLegendAvgMax = true,

} = {}) {

  return {

    option: object('EChart Options', option),

    thresholds: array('Thresholds', thresholds),

    data: object('Chart Data', data),

    includeLegendAvgMax: boolean('Include Legend Avg Max', includeLegendAvgMax),

    option: {

      default: object('EChart Options', option),

    },

    thresholds: {

      default: array('Thresholds', thresholds),

    },

    data: {

      default: object('Chart Data', data),

    },

    includeLegendAvgMax: {

      default: boolean('Include Legend Avg Max', includeLegendAvgMax),

    },

  };

}



documentedStoriesOf('charts|area-chart', readme)

  .addDecorator(withKnobs)

  .add('default', () => ({

    data() {

      return generateData();

    },

    props: generateProps(),

    components,

    template,

  }))

  .add('with threshold', () => ({

    data() {

      return generateData({

    props: generateProps({

      thresholds: [{ threshold: 1200, operator: '>' }],

      });

    },

    }),

    components,

    template,

  }))

  .add('with zoom and scroll', () => ({

    data() {

      return generateData({

    props: generateProps({

      data: [

        {

          name: 'Time Series',
@@ -101,14 +105,12 @@ documentedStoriesOf('charts|area-chart', readme) 
          },

        ],

      },

      });

    },

    }),

    components,

    template,

  }))

  .add('with toolbox', () => ({

    data() {

      return generateData({

    props: generateProps({

      option: {

        xAxis: {

          name: 'Time',
@@ -116,22 +118,17 @@ documentedStoriesOf('charts|area-chart', readme) 
        },

        toolbox,

      },

      });

    },

    }),

    components,

    template,

  }))

  .add('mult-series', () => ({

    data() {

      const { data } = defaultData[0];



      return generateData({

    props: generateProps({

      data: times(10, index => ({

        name: index,

          data: data.map(([label, value]) => [label, value * index]),

        data: defaultData[0].data.map(([label, value]) => [label, value * index]),

      })),

      });

    },

    }),

    components,

    template,

  }));

components/charts/column/column.stories.js

+33 −29
Original line number Diff line number Diff line
@@ -19,7 +19,7 @@ const template = ` 
  />

`;



function generateData({

function generateProps({

  data = {

    Full: [

      ['Mon', 1220],
@@ -37,26 +37,33 @@ function generateData({ 
  xAxisType = 'category',

} = {}) {

  return {

    data: object('Chart Data', data),

    option: object('Echart Options', option),

    yAxisTitle: text('Y Axis Title', yAxisTitle),

    xAxisTitle: text('X Axis Title', xAxisTitle),

    xAxisType: text('X Axis Type', xAxisType),

    data: {

      default: object('Chart Data', data),

    },

    option: {

      default: object('Echart Options', option),

    },

    yAxisTitle: {

      default: text('Y Axis Title', yAxisTitle),

    },

    xAxisTitle: {

      default: text('X Axis Title', xAxisTitle),

    },

    xAxisType: {

      default: text('X Axis Type', xAxisType),

    },

  };

}



documentedStoriesOf('charts|column-chart', readme)

  .addDecorator(withKnobs)

  .add('default', () => ({

    data() {

      return generateData();

    },

    props: generateProps(),

    components,

    template,

  }))

  .add('with zoom and scroll', () => ({

    data() {

      return generateData({

    props: generateProps({

      option: {

        dataZoom: [

          {
@@ -66,19 +73,16 @@ documentedStoriesOf('charts|column-chart', readme) 
          },

        ],

      },

      });

    },

    }),

    components,

    template,

  }))

  .add('with toolbox', () => ({

    data() {

      return generateData({

    props: generateProps({

      option: {

        toolbox,

      },

      });

    },

    }),

    components,

    template,

  }));

components/charts/discrete_scatter/discrete_scatter.stories.js

+14 −8
Original line number Diff line number Diff line
@@ -16,7 +16,7 @@ const template = ` 
  />

`;



function generateData({

function generateProps({

  data = [

    {

      type: 'scatter',
@@ -36,19 +36,25 @@ function generateData({ 
  xAxisTitle = 'Date',

} = {}) {

  return {

    data: object('Chart Data', data),

    option: object('EChart Options', option),

    yAxisTitle: text('Y Axis Title', yAxisTitle),

    xAxisTitle: text('X Axis Title', xAxisTitle),

    data: {

      default: object('Chart Data', data),

    },

    option: {

      default: object('EChart Options', option),

    },

    yAxisTitle: {

      default: text('Y Axis Title', yAxisTitle),

    },

    xAxisTitle: {

      default: text('X Axis Title', xAxisTitle),

    },

  };

}



documentedStoriesOf('charts|discrete-scatter-chart', readme)

  .addDecorator(withKnobs)

  .add('default', () => ({

    data() {

      return generateData();

    },

    props: generateProps(),

    components,

    template,

  }));

components/charts/heatmap/heatmap.stories.js

+0 −2
Original line number Diff line number Diff line 
import { withKnobs } from '@storybook/addon-knobs';

import documentedStoriesOf from '../../../utils/documented_stories';

import { GlHeatmap } from '../../../charts';

import { toolbox } from '../../../utils/charts/story_config';
@@ -15,7 +14,6 @@ function generateData() { 
}



documentedStoriesOf('charts|heatmap', readme)

  .addDecorator(withKnobs)

  .add('default', () => ({

    data() {

      return {

components/charts/line/line.stories.js

+62 −60
Original line number Diff line number Diff line
@@ -54,47 +54,52 @@ const defaultOptions = { 
    type: 'category',

  },

};



const template = `<gl-line-chart

  :data="data"

  :option="option"

  :thresholds="thresholds"

  :includeLegendAvgMax="includeLegendAvgMax"

/>`;



function generateData({

function generateProps({

  data = defaultData,

  option = defaultOptions,

  thresholds = [],

  includeLegendAvgMax = true,

} = {}) {

  return {

    option: object('EChart Options', option),

    thresholds: object('Thresholds', thresholds),

    data: object('Chart Data', data),

    includeLegendAvgMax: boolean('Include Legend Avg Max', includeLegendAvgMax),

    includeLegendAvgMax: {

      default: boolean('Include Legend Avg Max', includeLegendAvgMax),

    },

    option: {

      default: object('EChart Options', option),

    },

    thresholds: {

      default: object('Thresholds', thresholds),

    },

    data: {

      default: object('Chart Data', data),

    },

  };

}



documentedStoriesOf('charts|line-chart', readme)

  .addDecorator(withKnobs)

  .add('default', () => ({

    data() {

      return generateData();

    },

    props: generateProps(),

    components,

    template,

  }))

  .add('with threshold', () => ({

    data() {

      return generateData({

    props: generateProps({

      thresholds: [{ threshold: 1350, operator: '>' }],

      });

    },

    }),

    components,

    template,

  }))

  .add('with zoom and scroll', () => ({

    data() {

      return generateData({

    props: generateProps({

      data: [

        {

          name: 'Time Series',
@@ -133,14 +138,12 @@ documentedStoriesOf('charts|line-chart', readme) 
          },

        ],

      },

      });

    },

    }),

    components,

    template,

  }))

  .add('with toolbox', () => ({

    data() {

      return generateData({

    props: generateProps({

      option: {

        xAxis: {

          name: 'Time',
@@ -148,8 +151,7 @@ documentedStoriesOf('charts|line-chart', readme) 
        },

        toolbox,

      },

      });

    },

    }),

    components,

    template,

  }));