Standard usage story

ui/stories/charts/recommendation-chart.stories.js

@@ -5,10 +5,15 @@
 
 import hbs from 'htmlbars-inline-precompile';
 import DelayedTruth from '../utils/delayed-truth';
-import { withKnobs, optionsKnob, number } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  optionsKnob,
+  number,
+  boolean,
+} from '@storybook/addon-knobs';
 
 export default {
-  title: 'Charts/Recomendation CHart',
+  title: 'Charts/Recomendation Chart',
   decorators: [withKnobs],
 };
 
@@ -22,6 +27,7 @@ export let Configurable = () => {
           @currentValue={{current}}
           @recommendedValue={{recommendedValue}}
           @stats={{stats}}
+          @disabled={{disabled}}
         />
       {{/if}}
     `,
@@ -29,6 +35,65 @@ export let Configurable = () => {
   };
 };
 
+export let Standard = () => {
+  return {
+    template: hbs`
+      <SvgPatterns />
+      <div style="max-width: 500px">
+        {{#if delayedTruth.complete}}
+          <Das::RecommendationChart
+            @resource="CPU"
+            @currentValue={{cpu.current}}
+            @recommendedValue={{cpu.recommendedValue}}
+            @stats={{cpu.stats}}
+          />
+          <Das::RecommendationChart
+            @resource="MemoryMB"
+            @currentValue={{mem.current}}
+            @recommendedValue={{mem.recommendedValue}}
+            @stats={{mem.stats}}
+          />
+          <hr/>
+          <Das::RecommendationChart
+            @resource="CPU"
+            @currentValue={{cpu.current}}
+            @recommendedValue={{cpu.recommendedValue}}
+            @stats={{cpu.stats}}
+            @disabled={{true}}
+          />
+          <Das::RecommendationChart
+            @resource="MemoryMB"
+            @currentValue={{mem.current}}
+            @recommendedValue={{mem.recommendedValue}}
+            @stats={{mem.stats}}
+          />
+        {{/if}}
+      </div>
+    `,
+    context: {
+      delayedTruth: DelayedTruth.create(),
+      cpu: {
+        current: 100,
+        recommendedValue: 600,
+        stats: {
+          mean: 300,
+          p99: 500,
+          max: 525,
+        },
+      },
+      mem: {
+        current: 2048,
+        recommendedValue: 256,
+        stats: {
+          mean: 140,
+          p99: 215,
+          max: 225,
+        },
+      },
+    },
+  };
+};
+
 function contextFactory() {
   const numberConfig = { range: true, min: 0, max: 1000, step: 1 };
   return {
@@ -46,5 +111,6 @@ function contextFactory() {
       p99: number('Stat: p99', 600, numberConfig),
       max: number('Stat: max', 650, numberConfig),
     },
+    disabled: boolean('Disabled', false),
   };
 }