feat: bar chart y axis min

docs/src/app/pages/docs/components/app-components-charts/app-components-charts.tsx

@@ -1559,6 +1559,18 @@ export class AppComponentsCharts {
                   <code>false</code>
                 </td>
               </tr>
+              <tr>
+                <td>
+                  <code>yAxisMin</code>
+                </td>
+                <td>
+                  <code>y-axis-min</code>
+                </td>
+                <td></td>
+                <td>Set a minimal value for the y Axis. Useful in case the series of data could contains only zeros.</td>
+                <td></td>
+                <td></td>
+              </tr>
             </tbody>
           </table>
           <p>

webcomponents/charts/CHANGELOG.md

@@ -1,101 +1,119 @@
+<a name="1.0.0-rc.6-1"></a>
+
+# 1.0.0-rc.6-1 (2020-01-16)
+
+- add option `yAxisMin` to set a minimal value for the y Axis. useful in case the series of data could contains only zeros.
+
 <a name="1.0.0-rc.6"></a>
+
 # 1.0.0-rc.6 (2020-01-16)
 
-* add option to custom load (fetch) the data
+- add option to custom load (fetch) the data
 
 <a name="1.0.0-rc.5"></a>
+
 # 1.0.0-rc.5 (2019-11-30)
 
-* update margin and positioning of the charts
+- update margin and positioning of the charts
 
 <a name="1.0.0-rc.4"></a>
+
 # 1.0.0-rc.4 (2019-11-30)
 
 ### Features
 
-* add new property `data` and `yAxis` to the bar chart
-* add new method `updateCurrentBar()` to the bar chart
-* add new CSS variables for the fonts to the charts
+- add new property `data` and `yAxis` to the bar chart
+- add new method `updateCurrentBar()` to the bar chart
+- add new CSS variables for the fonts to the charts
 
-Note: some **major** internal modifications where developed to the bar chart in order to integrate it to the new `poll` template  
+Note: some **major** internal modifications where developed to the bar chart in order to integrate it to the new `poll` template
 
 <a name="1.0.0-rc.3-1"></a>
+
 # 1.0.0-rc.3-1 (2019-10-20)
 
 ### Fix
 
-* custom labels for x-axis compatible with ES5
+- custom labels for x-axis compatible with ES5
 
 <a name="1.0.0-rc.3"></a>
+
 # 1.0.0-rc.3 (2019-10-19)
 
 ### Breaking changes
 
-* indexing of the style of `line bar` chart has been moved from index `0` to begin with `1`
-* property `range` replaced by CSS4 variables generated dynamically 
+- indexing of the style of `line bar` chart has been moved from index `0` to begin with `1`
+- property `range` replaced by CSS4 variables generated dynamically
 
 ### Features
 
-* add a new CSS4 variable `--deckgo-chart-stroke` in case you would like to use a default styling color for all the graphs' lines
-* update most recent libs
+- add a new CSS4 variable `--deckgo-chart-stroke` in case you would like to use a default styling color for all the graphs' lines
+- update most recent libs
 
 <a name="1.0.0-rc.2"></a>
+
 # 1.0.0-rc.2 (2019-10-09)
 
 ### Features
 
-* when using animation bar, allow custom labels for x-axis ([#340](https://github.com/deckgo/deckdeckgo/issues/340))
+- when using animation bar, allow custom labels for x-axis ([#340](https://github.com/deckgo/deckdeckgo/issues/340))
 
 <a name="1.0.0-rc.1"></a>
+
 # 1.0.0-rc.1 (2019-08-30)
 
 ### Libs
 
-* update to most recent dependencies
+- update to most recent dependencies
 
 ### Note about v1.0.0-rc.1
 
-The first users began to test, and to create content in, our web open source editor for presentations (`studio`) 
+The first users began to test, and to create content in, our web open source editor for presentations (`studio`)
 
 <a name="1.0.0-alpha.8"></a>
+
 # 1.0.0-alpha.8 (2019-06-24)
 
 ### Features
 
-* animated charts: it is now possible to display several data in the same graphs. these could be displayed one after the others with a nice transition between these
+- animated charts: it is now possible to display several data in the same graphs. these could be displayed one after the others with a nice transition between these
 
 ### Breaking
 
-* the styling (fill color, etc.) of the `line` and `bar` chart has been modified
-* per default, the labels of the axis of the  `line` and `bar` will be displayed
+- the styling (fill color, etc.) of the `line` and `bar` chart has been modified
+- per default, the labels of the axis of the `line` and `bar` will be displayed
 
 Referer to the updated [documentation](https://docs.deckdeckgo.com) for more information.
 
 <a name="1.0.0-alpha.7"></a>
+
 # 1.0.0-alpha.7 (2019-06-04)
 
 ### Libs
 
-* upgrade to Stencil One
+- upgrade to Stencil One
 
 <a name="1.0.0-alpha.6"></a>
+
 # 1.0.0-alpha.6 (2019-05-24)
 
 ### Breaking
 
-* move to the org scoped package `@deckdeckgo/charts`
+- move to the org scoped package `@deckdeckgo/charts`
 
 <a name="1.0.0-alpha.5"></a>
+
 # [1.0.0-alpha.5](https://github.com/fluster/deckdeckgo-charts/compare/v1.0.0-alpha.4...v1.0.0-alpha.5) (2019-02-07)
 
 ### Features
 
-* feat: redraw chart if width, height or src change ([01aa026](https://github.com/deckgo/deckdeckgo-charts/commit/01aa026f0ab746684abf1e9e83b975ea15eaaef1))
-* feat: add text variable to bar and line charts ([54cbbb2](https://github.com/deckgo/deckdeckgo-charts/commit/54cbbb2a11a4873e9462b48dd41d0fb6985d5ef5))
+- feat: redraw chart if width, height or src change ([01aa026](https://github.com/deckgo/deckdeckgo-charts/commit/01aa026f0ab746684abf1e9e83b975ea15eaaef1))
+- feat: add text variable to bar and line charts ([54cbbb2](https://github.com/deckgo/deckdeckgo-charts/commit/54cbbb2a11a4873e9462b48dd41d0fb6985d5ef5))
 
 <a name="1.0.0-alpha.4"></a>
+
 # [1.0.0-alpha.4](https://github.com/fluster/deckdeckgo-charts/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2019-02-02)
 
 ### Lib
 
-* update Stencil and d3js ([530c090](https://github.com/deckgo/deckdeckgo-charts/commit/530c090eb85862576758c31886c9d38d1c2c98df))
+- update Stencil and d3js ([530c090](https://github.com/deckgo/deckdeckgo-charts/commit/530c090eb85862576758c31886c9d38d1c2c98df))

webcomponents/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/charts",
-  "version": "1.0.0-rc.6",
+  "version": "1.0.0-rc.6-1",
   "description": "A collection of Web Components to easily draw charts",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -29,24 +29,24 @@
     "d3-selection": "^1.4.1",
     "d3-shape": "^1.3.7",
     "d3-transition": "^1.3.2",
-    "date-fns": "^2.9.0"
+    "date-fns": "^2.10.0"
   },
   "devDependencies": {
     "@deckdeckgo/types": "^1.0.0-rc.4-1",
-    "@stencil/core": "^1.8.5",
+    "@stencil/core": "^1.8.11",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.1.1",
     "@stencil/utils": "0.0.5",
     "@types/d3-array": "^2.0.0",
     "@types/d3-axis": "^1.0.12",
     "@types/d3-ease": "^1.0.9",
-    "@types/d3-scale": "^2.1.1",
+    "@types/d3-scale": "^2.2.0",
     "@types/d3-scale-chromatic": "^1.3.1",
     "@types/d3-selection": "^1.4.1",
     "@types/d3-shape": "^1.3.2",
-    "@types/d3-transition": "^1.1.5",
+    "@types/d3-transition": "^1.1.6",
     "autoprefixer": "^9.7.4",
-    "husky": "^4.2.1",
+    "husky": "^4.2.3",
     "prettier": "1.19.1",
     "pretty-quick": "^2.0.1"
   },

webcomponents/charts/src/components.d.ts

@@ -34,6 +34,7 @@ export namespace Components {
     'updateCurrentBar': (values: DeckdeckgoBarChartDataValue[]) => Promise<void>;
     'width': number;
     'yAxis': boolean;
+    'yAxisMin': number;
   }
   interface DeckgoLineChart {
     'animation': boolean;
@@ -125,6 +126,7 @@ declare namespace LocalJSX {
     'src'?: string;
     'width'?: number;
     'yAxis'?: boolean;
+    'yAxisMin'?: number;
   }
   interface DeckgoLineChart {
     'animation'?: boolean;

webcomponents/charts/src/components/charts/deckdeckgo-bar-chart/deckdeckgo-bar-chart.tsx

@@ -48,6 +48,8 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
   @Prop() yAxis: boolean = true;
 
+  @Prop() yAxisMin: number = 0;
+
   @Event()
   private chartCustomLoad: EventEmitter<string>;
 
@@ -160,14 +162,13 @@ export class DeckdeckgoBarChart implements DeckdeckgoChart {
 
   private initAxisYDomain(): Promise<void> {
     return new Promise<void>((resolve) => {
-      this.y.domain([
-        0,
-        max(this.chartData, (category) => {
-          return max(category.values, (d) => {
-            return d.value;
-          });
-        })
-      ]);
+      const maxValue: number = max(this.chartData, (category) => {
+        return max(category.values, (d) => {
+          return d.value;
+        });
+      });
+
+      this.y.domain([0, Math.max(this.yAxisMin, maxValue)]);
 
       resolve();
     });