feat(#471): add chart to poll slide with data

deckgo · Nov 13, 2019 · c82d6ba · c82d6ba
1 parent cbb582e
commit c82d6ba
Show file tree

Hide file tree

Showing 10 changed files with 509 additions and 34 deletions.
diff --git a/webcomponents/charts/src/components.d.ts b/webcomponents/charts/src/components.d.ts
@@ -7,12 +7,15 @@
 
 
 import { HTMLStencilElement, JSXBase } from '@stencil/core/internal';
-
+import {
+  DeckdeckgoBarChartData,
+} from './components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart-data';
 
 export namespace Components {
   interface DeckgoBarChart {
     'animation': boolean;
     'animationDuration': number;
+    'data': DeckdeckgoBarChartData[];
     'draw': (width?: number, height?: number) => Promise<void>;
     'height': number;
     'isBeginning': () => Promise<boolean>;
@@ -26,6 +29,7 @@ export namespace Components {
     'separator': string;
     'src': string;
     'width': number;
+    'yAxis': boolean;
   }
   interface DeckgoLineChart {
     'animation': boolean;
@@ -97,6 +101,7 @@ declare namespace LocalJSX {
   interface DeckgoBarChart {
     'animation'?: boolean;
     'animationDuration'?: number;
+    'data'?: DeckdeckgoBarChartData[];
     'height'?: number;
     'marginBottom'?: number;
     'marginLeft'?: number;
@@ -105,6 +110,7 @@ declare namespace LocalJSX {
     'separator'?: string;
     'src'?: string;
     'width'?: number;
+    'yAxis'?: boolean;
   }
   interface DeckgoLineChart {
     'animation'?: boolean;

diff --git a/...omponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart-data.tsx b/...omponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart-data.tsx
@@ -0,0 +1,36 @@
+// A bar
+export interface DeckdeckgoBarChartDataValue {
+  // The key of a bar, use for the style
+  key: number | string;
+  // A title for the bar
+  title: string;
+  // Its value
+  value: number;
+}
+
+// A chart
+export interface DeckdeckgoBarChartData {
+  // The chart label
+  label: string | Date | number;
+  // 1 or multiple bars
+  values: DeckdeckgoBarChartDataValue[];
+}
+
+// Example
+// [{
+//   "label": "01.01.2018",
+//   "values": [{"key": "1", "title": "Salami", "value": 5, "randomFillColor": "49c001"}, {
+//     "key": "2",
+//     "title": "Pastrami",
+//     "value": 0,
+//     "randomFillColor": "f398d0"
+//   }, {"key": "3", "title": "Prosciutto", "value": 10, "randomFillColor": "4a5dfd"}]
+// }, {
+//   "label": "01.03.2018",
+//   "values": [{"key": "1", "title": "Salami", "value": 10, "randomFillColor": "49c001"}, {
+//     "key": "2",
+//     "title": "Pastrami",
+//     "value": 6,
+//     "randomFillColor": "f398d0"
+//   }, {"key": "3", "title": "Prosciutto", "value": 12, "randomFillColor": "4a5dfd"}]
+// }]
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.scss b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.scss
@@ -1,6 +1,7 @@
 text {
   fill: var(--deckgo-chart-text-color, black);
   display: var(--deckgo-chart-text-display);
+  font-size: var(--deckgo-chart-text-font-size);
 }
 
 .axis path,
@@ -9,3 +10,7 @@ text {
   stroke: var(--deckgo-chart-axis-color, black);
   shape-rendering: crispEdges;
 }
+
+svg {
+  overflow: var(--deckgo-chart-overflow);
+}
diff --git a/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx b/webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx
@@ -8,17 +8,7 @@ import {max} from 'd3-array';
 import {Axis, axisBottom, axisLeft} from 'd3-axis';
 import {transition} from 'd3-transition';
 
-interface DeckdeckgoBarChartDataValue {
-  key: string;
-  title: string;
-  value: number;
-  randomFillColor: string;
-}
-
-interface DeckdeckgoBarChartData {
-  label: any;
-  values: DeckdeckgoBarChartDataValue[];
-}
+import {DeckdeckgoBarChartData, DeckdeckgoBarChartDataValue} from './deckdeckgo-bar-chart-data';
 
 @Component({
   tag: 'deckgo-bar-chart',
@@ -48,10 +38,14 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
   private x1: any;
   private y: any;
 
-  private data: DeckdeckgoBarChartData[];
+  @Prop({mutable: true}) data: DeckdeckgoBarChartData[];
 
   private barDataIndex: number = 0;
 
+  private randomColors: string[];
+
+  @Prop() yAxis: boolean = true;
+
   async componentDidLoad() {
     await this.draw();
   }
@@ -72,7 +66,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         this.height = height;
       }
 
-      if (!this.width || !this.height || !this.src) {
+      if (!this.width || !this.height) {
         resolve();
         return;
       }
@@ -82,9 +76,11 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
       this.svg = DeckdeckgoChartUtils.initSvg(this.el, (this.width + this.marginLeft + this.marginRight), (this.height + this.marginTop + this.marginBottom));
       this.svg = this.svg.append('g').attr('transform', 'translate(' + this.marginLeft + ',' + this.marginTop + ')');
 
-      this.data = await this.fetchData();
+      if (this.src) {
+        this.data = await this.fetchData();
+      }
 
-      if (!this.data || this.data.length <= 0) {
+      if (!this.data || this.data === undefined || this.data.length <= 0) {
         resolve();
         return;
       }
@@ -93,6 +89,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
       await this.drawAxis();
 
+      this.randomColors = Array.from({ length: this.data[0].values.length }, (_v, _i) => (Math.floor(Math.random()*16777215).toString(16)));
+
       await this.drawBars(0, 0);
 
       resolve();
@@ -162,16 +160,22 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
   private drawAxis(): Promise<void> {
     return new Promise<void>((resolve) => {
       const bottomAxis: Axis<any> = axisBottom(this.x0);
-      const leftAxis: Axis<any> = axisLeft(this.y);
 
       this.svg.append('g')
         .attr('class', 'axis axis-x')
         .attr('transform', 'translate(0,' + this.height + ')')
         .call(bottomAxis)
         .selectAll('text')
-        .attr('transform', 'translate(-10,0)rotate(-45)')
+        .attr('transform', 'translate(-8,8)rotate(-45)')
         .style('text-anchor', 'end');
 
+      if (!this.yAxis) {
+        resolve();
+        return;
+      }
+
+      const leftAxis: Axis<any> = axisLeft(this.y);
+
       this.svg.append('g')
         .attr('class', 'axis axis-y')
         .call(leftAxis);
@@ -230,8 +234,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         .enter()
         .append('rect')
         .merge(section)
-        .attr('style', (d) => {
-          return 'fill: var(--deckgo-chart-fill-color-' + d.key + ', ' + (d.randomFillColor ? `#${d.randomFillColor}` : '') + '); fill-opacity: var(--deckgo-chart-fill-opacity-' + d.key + '); stroke: var(--deckgo-chart-stroke-' + d.key + '); stroke-width: var(--deckgo-chart-stroke-width-' + d.key + ')';
+        .attr('style', (d, i) => {
+          return 'fill: var(--deckgo-chart-fill-color-' + d.key + ', ' + (this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '') + '); fill-opacity: var(--deckgo-chart-fill-opacity-' + d.key + '); stroke: var(--deckgo-chart-stroke-' + d.key + '); stroke-width: var(--deckgo-chart-stroke-width-' + d.key + ')';
         })
         .transition(t).duration(animationDuration)
         .attr('x', (d) => {
@@ -274,8 +278,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
         .attr('height', (d) => {
           return this.height - this.y(d.value);
         })
-        .attr('style', (d) => {
-          return 'fill: var(--deckgo-chart-fill-color-' + d.key + ', ' + (d.randomFillColor ? `#${d.randomFillColor}` : '')  + '); fill-opacity: var(--deckgo-chart-fill-opacity-' + d.key + '); stroke: var(--deckgo-chart-stroke-' + d.key + '); stroke-width: var(--deckgo-chart-stroke-width-' + d.key + ')';
+        .attr('style', (d, i) => {
+          return 'fill: var(--deckgo-chart-fill-color-' + d.key + ', ' + (this.randomColors && this.randomColors.length > i ? `#${this.randomColors[i]}` : '')  + '); fill-opacity: var(--deckgo-chart-fill-opacity-' + d.key + '); stroke: var(--deckgo-chart-stroke-' + d.key + '); stroke-width: var(--deckgo-chart-stroke-width-' + d.key + ')';
         });
 
       resolve();
@@ -306,7 +310,6 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
       let results: DeckdeckgoBarChartData[] = [];
       let keys: (number | string)[];
-      let randomColors: string[];
 
       lines.forEach((line: string, lineCount: number) => {
         const values: string[] = line.split(this.separator);
@@ -318,10 +321,6 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
             keys = Array.apply(null, {length: values.length}).map(Number.call, Number).slice(1);
           }
 
-          if (!randomColors) {
-            randomColors = Array.from({ length: values.length }, (_v, _i) => (Math.floor(Math.random()*16777215).toString(16)));
-          }
-
           let dataValues: DeckdeckgoBarChartDataValue[] = [];
           for (let i = 1; i < values.length; i++) {
             const tmp: number = parseInt(values[i]);
@@ -330,8 +329,7 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
               dataValues.push({
                 key: `${i}`,
                 title: keys.length >= i ? `${keys[i - 1]}` : `${i}`,
-                value: tmp,
-                randomFillColor: randomColors.length >= (i + 1) ? randomColors[i] : undefined
+                value: tmp
               });
             } else if (lineCount === 0 && keys.length >= i) {
               keys[i - 1] = values[i];

diff --git a/webcomponents/charts/src/index.html b/webcomponents/charts/src/index.html
@@ -26,7 +26,7 @@
     <button onclick="drawLine()">Redraw</button>
   </div>
 
-  <deckgo-bar-chart animation="true" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-bar-chart>
+  <deckgo-bar-chart y-axis="false" animation="true" width="500" height="400" src="https://raw.githubusercontent.com/deckgo/deckdeckgo/master/webcomponents/charts/showcase/data-bar-chart-to-compare-with-titles.csv" style="--deckgo-chart-fill-color-1: #3880ff; --deckgo-chart-fill-color-2: #0cd1e8; --deckgo-chart-fill-color-3: #7044ff;"></deckgo-bar-chart>
 
   <div>
     <button onclick="prev('deckgo-bar-chart')">Prev</button>