Merge 5a7b2ed into c25e691

README.md

@@ -57,6 +57,7 @@ The legend items can have the following configuration parameters:
 * `style`: can be an object with svg style parameters such as `stroke`,
   `stroke-width` etc. in order to style the legend icon
 * `title`: the legend text
+* `value`: if set, a `value` attribute will be added to the legend node
 * `type`: can be `'line'`, `'bar'`, `'area'` or `'background'` in order to
   render a line, a small bar chart icon, a line with the area below it filled or
   just a filled block
@@ -76,6 +77,8 @@ configuration parameters:
 * `titleColor`: the color hex string
 * `titlePadding`: title padding from the top
 * `titleSize`: title size
+* `groupedInitiallyHidden`: a list of grouping indexes for bars that should initially be hidden
+* `groupsInitiallyHidden`: a list of group indexes for bars that should initially be hidden
 * `data`: the data object. Example:
 
 ```javascript

package.json

@@ -31,10 +31,10 @@
     "d3-tip": "^0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-class-properties": "^7",
     "@babel/plugin-proposal-function-bind": "^7",
-    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-env": "^7.9.6",
     "@types/d3-array": "^2",
     "@types/d3-axis": "^1",
     "@types/d3-color": "^1",
@@ -50,23 +50,23 @@
     "@types/jest": "^25.2.1",
     "awesome-typescript-loader": "^5",
     "babel-eslint": "^10",
-    "babel-jest": "^25",
+    "babel-jest": "^26",
     "babel-loader": "^8",
     "babel-plugin-dynamic-import-node": "^2",
     "babel-plugin-import": "^1.13.0",
-    "coveralls": "^3.0.11",
+    "coveralls": "^3.1.0",
     "d3": "^5.12.0",
     "d3-tip": "^0",
     "eslint": "^6.8.0",
-    "jest": "^25",
+    "jest": "^26",
     "moment": "^2",
-    "np": "^6.2.1",
+    "np": "^6.2.3",
     "rimraf": "^3.0.2",
     "ts-jest": "^25.4.0",
-    "tslint": "^6.1.1",
-    "typedoc": "^0.17.4",
+    "tslint": "^6.1.2",
+    "typedoc": "^0.17.6",
     "typescript": "^3.8.3",
-    "webpack": "^4.42.1",
+    "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "whatwg-fetch": "^3"
   }

src/BarComponent/BarComponent.spec.ts

@@ -39,7 +39,9 @@ describe('BarComponent', () => {
         display: true
       }
     },
-    rotateBarLabel: false
+    rotateBarLabel: false,
+    groupedInitiallyHidden: [] as string[],
+    groupsInitiallyHidden: [] as string[]
   };
 
   it('is defined', () => {

src/BarComponent/BarComponent.ts

@@ -37,6 +37,8 @@ export interface BarConfiguration extends BackgroundConfiguration, TitleConfigur
   yOffset?: number;
   rotateBarLabel?: boolean;
   showLabelInsideBar?: boolean;
+  groupedInitiallyHidden: string[];
+  groupsInitiallyHidden: string[];
 }
 
 /**
@@ -123,6 +125,9 @@ class BarComponent {
       `0 0 ${this.chartSize[0] + offsets[0] + (padding ? padding : 0)} ${this.chartSize[1] + offsets[1]}`)
       .attr('width', this.chartSize[0] + offsets[0] + (padding ? padding : 0))
       .attr('height', this.chartSize[1] + offsets[1] + this.config.yOffset);
+
+    this.config.groupsInitiallyHidden.forEach(val => this.toggleGroup(val));
+    this.config.groupedInitiallyHidden.forEach(val => this.toggleGrouped(val));
   }
 
   /**
@@ -232,6 +237,7 @@ class BarComponent {
   /**
    * Toggle the group with the given index.
    * @param  {any} index the x value of the group
+   * @return true, if the group's bars are now visible
    */
   toggleGroup(index: string) {
     const node = this.rootNode.select(`[value="${index}"]`);
@@ -242,11 +248,13 @@ class BarComponent {
       node.style('display', 'none');
       node.attr('visible', 'false');
     }
+    return node.attr('visible') === 'true';
   }
 
   /**
-   * Toggle the grouped bars with the given index
+   * Toggle the grouped bars with the given index.
    * @param  {any} index the x value of the bars
+   * @return true, if the grouped bars are now visible
    */
   toggleGrouped(index: string) {
     const node = this.rootNode.selectAll(`[value="${index}"]`);
@@ -257,6 +265,7 @@ class BarComponent {
       node.style('display', 'none');
       node.attr('visible', 'false');
     }
+    return node.attr('visible') === 'true';
   }
 
   /**

src/LegendComponent/LegendComponent.ts

@@ -15,6 +15,7 @@ interface LegendItemConfiguration {
   style?: object;
   title?: string;
   tooltip?: string;
+  value?: string;
   contextmenuHandler?: (event: any) => any;
   onClick?: (event: any) => any;
   customRenderer?: (legend: NodeSelection) => any;
@@ -100,6 +101,9 @@ class LegendComponent implements ChartComponent {
 
     leg.append('title')
       .text(item.tooltip || item.title);
+    if (item.value) {
+      leg.attr('value', item.value);
+    }
 
     if (item.customRenderer instanceof Function) {
       item.customRenderer(leg);

src/ScaleUtil/ScaleUtil.spec.ts

@@ -61,7 +61,9 @@ describe('ScaleUtil', () => {
           orientation: 'y'
         }
       },
-      size: [100, 100]
+      size: [100, 100],
+      groupedInitiallyHidden: [] as string[],
+      groupsInitiallyHidden: [] as string[]
     });
     expect(scales.length).toEqual(3);
   });
@@ -109,8 +111,10 @@ describe('ScaleUtil', () => {
           orientation: 'y'
         }
       },
-      size: [100, 100]
-    });
+      size: [100, 100],
+      groupedInitiallyHidden: [] as string[],
+      groupsInitiallyHidden: [] as string[]
+      });
     expect(scales.length).toEqual(3);
   });