axidio-styleguide-library1-v2 0.1.23 → 0.1.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/lib/group-chart/group-chart.component.mjs +21 -22
  2. package/esm2022/lib/horizontal-bars-with-scroll-zoom/horizontal-bars-with-scroll-zoom.component.mjs +15 -10
  3. package/esm2022/lib/horizontal-grouped-bar-with-scroll-zoom/horizontal-grouped-bar-with-scroll-zoom.component.mjs +68 -22
  4. package/fesm2022/axidio-styleguide-library1-v2.mjs +101 -51
  5. package/fesm2022/axidio-styleguide-library1-v2.mjs.map +1 -1
  6. package/lib/horizontal-bars-with-scroll-zoom/horizontal-bars-with-scroll-zoom.component.d.ts +2 -1
  7. package/package.json +1 -1
package/fesm2022/axidio-styleguide-library1-v2.mjs CHANGED
@@ -3939,8 +3939,8 @@ class GroupChartComponent extends ComponentUniqueId {
3939
3939
  else {
3940
3940
  x = d3
3941
3941
  .scaleBand()
3942
+ .domain(groups)
3942
3943
  .range([leftAndRightSpaces, width - rightSvgWidth - leftAndRightSpaces])
3943
- .domain(groups).reverse()
3944
3944
  .padding([0.3]);
3945
3945
  }
3946
3946
  // x.bandwidth(96);
@@ -4557,30 +4557,29 @@ class GroupChartComponent extends ComponentUniqueId {
4557
4557
  .attr('class', 'title')
4558
4558
  .style('z-index', 99)
4559
4559
  .html(function () {
4560
- if (!isNaN(d[1] - d[0])) {
4561
- if (d[1] - d[0] === 0) {
4562
- return '<span class="title-top-text">0</span>';
4563
- }
4564
- var dataType = metaData.dataType ? metaData.dataType : '';
4565
- var desiredText = '';
4566
- desiredText =
4567
- '<span class="title-bar-name">' +
4568
- (d.data.name ? d.data.name : '') +
4569
- '</span>';
4570
- desiredText += metaData.unit
4571
- ? '<span class="title-top-text">' +
4572
- metaData.unit +
4573
- (d[1] - d[0]) +
4574
- dataType +
4575
- '</span>'
4576
- : '<span class="title-top-text">' +
4577
- (d[1] - d[0]) +
4560
+ let dataType = metaData.dataType ? metaData.dataType : '';
4561
+ if (!self.isZoomedOut) {
4562
+ let desiredText = '<span class="title-bar-name">' + d.name + '</span>';
4563
+ desiredText +=
4564
+ '<span class="title-bar-value"><span>' +
4565
+ d.Value +
4566
+ '</span>' +
4578
4567
  dataType +
4579
4568
  '</span>';
4580
4569
  return desiredText;
4581
4570
  }
4582
- else
4583
- return;
4571
+ else {
4572
+ let tempKey = d.name.length <= 8 ? d.name : d.name.substring(0, 5) + '...';
4573
+ let desiredText = '<span class="title-bar-name">' +
4574
+ tempKey +
4575
+ ':' +
4576
+ d.Value +
4577
+ dataType +
4578
+ '</span>';
4579
+ desiredText +=
4580
+ '<span class="title-bar-value">' + d.name + '</span>';
4581
+ return desiredText;
4582
+ }
4584
4583
  });
4585
4584
  }
4586
4585
  function handleMouseOut(d, i) {
@@ -7162,7 +7161,16 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7162
7161
  isTitleHidden: undefined,
7163
7162
  };
7164
7163
  this.isCC = false;
7165
- this.isZoomedOut = true;
7164
+ this.isZoomedOut = false;
7165
+ }
7166
+ isZoomOutSelected(isZoomOut) {
7167
+ this.isZoomedOut = isZoomOut;
7168
+ this.ngOnChanges();
7169
+ }
7170
+ ngOnChanges() {
7171
+ let self = this;
7172
+ d3.select('#' + self.uniqueId).remove();
7173
+ this.initializeStackedChart();
7166
7174
  }
7167
7175
  onResized(event) {
7168
7176
  let self = this;
@@ -7171,10 +7179,6 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7171
7179
  self.initializeStackedChart();
7172
7180
  }.bind(self), 10);
7173
7181
  }
7174
- isZoomOutSelected(isZoomOut, event) {
7175
- this.isZoomedOut = isZoomOut;
7176
- this.onResized(event);
7177
- }
7178
7182
  ngOnInit() { }
7179
7183
  initializeStackedChart() {
7180
7184
  var self = this;
@@ -7388,14 +7392,14 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
7388
7392
  ])
7389
7393
  .domain(data.map(function (d) {
7390
7394
  return d.name;
7391
- }).reverse())
7395
+ }))
7392
7396
  .padding(isMobile ? 0.2 : 0.5);
7393
7397
  var xScaleFromOrigin = d3
7394
7398
  .scaleBand()
7395
7399
  .rangeRound([width - rightSvgWidth, 0])
7396
7400
  .domain(data.map(function (d) {
7397
7401
  return d.name;
7398
- }).reverse());
7402
+ }));
7399
7403
  // ...existing code...
7400
7404
  /**
7401
7405
  * draw second x axis on top
@@ -8355,10 +8359,10 @@ class HorizontalBarsWithScrollZoomComponent extends ComponentUniqueId {
8355
8359
  this.clickEvent.emit(event);
8356
8360
  }
8357
8361
  handleZoominZoomoutClick({ isZoomOut, event }) {
8358
- this.isZoomOutSelected(isZoomOut, event);
8362
+ this.isZoomOutSelected(isZoomOut);
8359
8363
  }
8360
8364
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
8361
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v2>\r\n\r\n <!-- <span *ngIf=\"chartConfiguration.isComparebyDropdownVisible\">\r\n <lib-dropdown></lib-dropdown>\r\n </span> -->\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title-top-text{color:var(--font-color)!important;font-size:14px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}@media (max-width: 575px){.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr}}@media screen and (min-width: 1024px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1366px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1920px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 2560px) and (min-height: 500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1{background-color:#2e3640}.lib-chart-wrapper:hover .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
8365
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HorizontalBarsWithScrollZoomComponent, selector: "lib-horizontal-bars-with-scroll-zoom", inputs: { chartData: "chartData", customChartConfiguration: "customChartConfiguration" }, outputs: { clickEvent: "clickEvent", headerMenuclickEvent: "headerMenuclickEvent" }, viewQueries: [{ propertyName: "containerElt", first: true, predicate: ["verticalstackedchartcontainer"], descendants: true, static: true }, { propertyName: "verticalstackedcontainerElt", first: true, predicate: ["verticalstackedcontainer"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<meta http-equiv=\"CACHE-CONTROL\" content=\"NO-CACHE\" />\r\n<meta http-equiv=\"EXPIRES\" content=\"Sat, 01 Jun 2004 11:12:01 GMT\" />\r\n<div\r\n #verticalstackedcontainer\r\n class=\"lib-chart-wrapper\"\r\n [ngClass]=\"{ 'lib-no-background': isTransparentBackground }\"\r\n style=\"background-color: var(--card-bg);\"\r\n\r\n (resized)=\"onResized($event)\"\r\n>\r\n <div class=\"header-alt\" *ngIf=\"!isHeaderVisible\">\r\n <lib-chart-header-v2\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (clickEvent)=\"handleClick($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v2>\r\n\r\n <!-- <span *ngIf=\"chartConfiguration.isComparebyDropdownVisible\">\r\n <lib-dropdown></lib-dropdown>\r\n </span> -->\r\n <lib-chart-header-v3\r\n [chartData]=\"chartData\"\r\n [chartConfiguration]=\"chartConfiguration\"\r\n (compareByFilterSelection)=\"handleCompareByFilterSelection($event)\"\r\n (zoomInZoomOutClick)=\"handleZoominZoomoutClick($event)\"\r\n ></lib-chart-header-v3>\r\n </div>\r\n <div\r\n [style.height]=\"chartConfiguration.svgHeight\"\r\n id=\"verticalstackedchartcontainer\"\r\n #verticalstackedchartcontainer\r\n class=\"lib-chart-svg\"\r\n ></div>\r\n</div>\r\n", styles: [".lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1;font-size:1.2em}.lib-axis-group-label{font-size:.85em;font-weight:600;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.dots{font-size:10px}.inline__display{display:flex;justify-content:space-around;padding-top:2%}.verticalbar__text{font-style:normal;font-variant:normal;font-weight:400;font-size:13px;line-height:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;opacity:1}.lib-line-label-item{display:inline-block!important;font-size:.85em;margin-right:10px;font-weight:600}.lib-line-label-wrapper-vertical{display:flex;justify-content:center}.target-display{font-size:12px;line-height:14.52px;font-weight:700;text-transform:uppercase;float:right}.title{background-color:#d9d9d9;height:40px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:3px;line-height:1}.title-top-text{color:var(--font-color)!important;font-size:14px;font-weight:600}.title-bar-name{color:var(--font-color)!important;font-size:17px;font-weight:700;text-transform:capitalize}.title-bottom-text{color:var(--font-color)!important;font-size:12px}.zoomIcons-holder{display:flex;align-items:center;margin-right:15px}.zoomIcons{border:.5px solid #b6b6b6;cursor:pointer;display:flex;justify-content:center;align-items:center;width:30px;height:30px;color:var(--color)!important}.zoom-active{background-color:#2d5ca0;opacity:1}.zoom-inactive{background-color:#d9d9d9;opacity:.5}@media (max-width: 575px){.lib-xaxis-labels-texts-drilldown{writing-mode:sideways-lr}}@media screen and (min-width: 1024px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1024px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:10px!important}.dots{font-size:10px!important}}@media screen and (min-width: 1366px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1366px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:12px!important}.dots{font-size:12px!important}}@media screen and (min-width: 1920px) and (min-height: 400px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 1920px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:14px!important}.dots{font-size:14px!important}}@media screen and (min-width: 2560px) and (min-height: 500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1000px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}.dots{font-size:16px!important}}@media screen and (min-width: 2560px) and (min-height: 1500px){.lib-stacked-y-axis-text text,.lib-stacked-x-axis-text text{font-size:16px!important}}.bottom__text{position:absolute!important;bottom:0!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important}.box__heightwidth{opacity:1;height:10px;width:10px;border:none!important;border-radius:50%}.label__text{margin-right:10px;display:flex;justify-content:center;align-items:center;font-style:normal;font-variant:normal;font-weight:400;font-size:10px;line-height:13px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;letter-spacing:.2px;color:#707070!important}.lib-verticalstack-labels-ontop-weklycharts{font-style:normal;font-variant:normal;font-weight:700;font-size:10px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.lib-verticalstack-title-ontop{font-style:normal;font-variant:normal;font-size:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.05px;text-anchor:middle;fill:#000}.marginLeft-20{margin-left:20px}.flex-inline{display:flex;justify-content:center;align-items:center;font-size:14px}\n", ".lib-chart-wrapper{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;background:#fff 0% 0% no-repeat padding-box;position:relative}.lib-chart-wrapper-wo-shadow{width:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}.lib-chart-wrapper:hover .chart-header-v1{background-color:#2e3640}.lib-chart-wrapper:hover .chart-title{color:#fff}.lib-chart-svg{width:100%}.lib-chart-header{text-align:center;background-color:#052340;color:#fff;width:100%;height:17%;word-spacing:.5px;line-height:1.8;font-weight:700;padding-top:2%;letter-spacing:0;font-size:1.2em}.lib-donut-chart-footer{width:100%;text-align:right}.lib-donut-label-text{font-size:.9em;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-weight:400;letter-spacing:0px;color:#000;opacity:1}.lib-donut-label-icon{display:inline-block;width:10px;height:10px;margin-right:20px;border-radius:3px}.lib-donut-label-item{font-weight:400;font-size:.85em;color:#2f2f2f}.lib-donut-justified-label-wrapper{width:100%;display:inline-block;text-align:center;list-style-type:none}.lib-donut-justified-label-item{font-weight:400;font-size:.85em;color:#2f2f2f;display:inline-block;text-align:left;padding:0 10px}.lib-donut-justified-label-icon{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px}.lib-no-background{background:none!important}.lib-display-hidden{display:none}.lib-ylabel-weeklyCharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:12px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.07px;text-transform:capitalize;color:#000}.lib-data-labels-weeklycharts{font-style:normal;font-variant:normal;font-weight:400;font-size:12px;line-height:14px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:-.06px;color:#000}.lib-data-labels-angled-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:9.5px;line-height:11px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:.4px;text-anchor:start}.lib-xaxis-labels-texts-weeklycharts{font-style:normal;font-variant:normal;font-weight:800;font-size:10px;line-height:11px;letter-spacing:-.05px;fill:#000}.lib-xaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:-1px;color:#000;opacity:1;text-transform:capitalize}.lib-white-space-nowrap{white-space:nowrap}.lib-xaxis-labels-texts-drilldown-alt{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:10px;letter-spacing:0px;color:#000;opacity:1;text-transform:capitalize}.lib-yaxis-labels-texts-drilldown{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:14px;letter-spacing:0px;color:#000!important;opacity:1}.lib-ylabel-drilldowncharts,.lib-xlabel-drilldowncharts{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;font-size:16px;letter-spacing:-.1px;color:#000!important;opacity:1}.lib-donut-justified-label-icon-drilldown{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%}.marginright-2{margin-right:2%}.margintop-5{margin-top:5%}.width-100{width:100%}.float-right{float:right}.marginBottom-10{margin-bottom:10px}.header-alt{align-items:center;margin-bottom:10px}input::placeholder{font-size:20px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;letter-spacing:0px;color:#000;opacity:1}.padding-5{padding:5px}.hidden{visibility:hidden}.font-weight-bold{font-weight:900}.textalign-center{text-align:center}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.font-weight-600{font-weight:600}.marginRight-15{margin-right:15px}.marginRight-20{margin-right:20px}.switch{position:relative;display:inline-block;width:46px;height:24px;margin-left:5px;margin-right:5px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#2d5ca0;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:\"\";height:18px;width:18px;right:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider.round{border-radius:18px}.slider.round:before{border-radius:50%}.slider1{position:absolute;cursor:pointer;inset:0;background-color:#015ba2cf;-webkit-transition:.4s;transition:.4s}.slider1:before{position:absolute;content:\"\";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;-webkit-transition:.4s;transition:.4s}.slider1.round1{border-radius:18px}.slider1.round1:before{border-radius:50%}.lib-display-flex{display:flex}.lib-align-items-center{align-items:center}.lib-flex-direction-column{flex-direction:column}.lib-justify-content-space-between{justify-content:space-between}.lib-justify-content-space-around{justify-content:space-around}.lib-justify-content-center{justify-content:center}.lib-justify-content-start{justify-content:start}.lib-justify-content-end{justify-content:end}.lib-ml-20{margin-left:20px}.lib-position-absolute{position:absolute}.lib-z-index-9{z-index:9}.marginright-3{margin-right:3px}@media (min-height: 900px){.lib-chart-wrapper{border-radius:8px}.header-font-size-1{font-size:18px!important}.font-size-1{font-size:14px!important}.font-size-2{font-size:16px!important}.font-size-3{font-size:14px!important}.font-size-4{font-size:22px!important}.font-size-5{font-size:24px!important}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ResizedDirective, selector: "[resized]", outputs: ["resized"] }, { kind: "component", type: ChartHeaderV2Component, selector: "lib-chart-header-v2", inputs: ["chartData", "chartConfiguration"], outputs: ["clickEvent", "zoomInZoomOutClick"] }, { kind: "component", type: ChartHeaderV3Component, selector: "lib-chart-header-v3", inputs: ["chartData", "chartConfiguration"], outputs: ["compareByFilterSelection", "zoomInZoomOutClick"] }], encapsulation: i0.ViewEncapsulation.None }); }
8362
8366
  }
8363
8367
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HorizontalBarsWithScrollZoomComponent, decorators: [{
8364
8368
  type: Component,
@@ -8547,7 +8551,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8547
8551
  var height = parseInt(verticalstackedcontainer.style('height')) *
8548
8552
  (self.chartConfiguration.svgHeight / 100) -
8549
8553
  margin.top -
8550
- margin.bottom + 30;
8554
+ margin.bottom;
8551
8555
  /**
8552
8556
  * entire height used in weekly charts as x axis needed to be displayed at the bottom of the chart
8553
8557
  */
@@ -8638,7 +8642,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8638
8642
  .append('svg')
8639
8643
  // .attr('id', self.uniqueId)
8640
8644
  .attr('width', width - rightSvgWidth)
8641
- .attr('height', height + margin.top + margin.bottom + 30)
8645
+ .attr('height', height + margin.top + margin.bottom + 60)
8642
8646
  // .call(ChartHelper.responsivefy)
8643
8647
  .append('g')
8644
8648
  .attr('transform', 'translate(' + 0 + ',' + margin.top + ')');
@@ -8774,18 +8778,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8774
8778
  });
8775
8779
  }
8776
8780
  if (self.chartConfiguration.xLabelsOnSameLine) {
8777
- svg
8781
+ const xAxisLabels = svg
8778
8782
  .selectAll('g.x1.axis1 g.tick text')
8779
8783
  .attr('class', 'lib-xaxis-labels-texts-drilldown')
8780
8784
  .style('font-size', this.isHeaderVisible ? '18px' : '14px')
8785
+ .attr('text-anchor', 'middle')
8781
8786
  .attr('y', function (d) {
8782
- // For grouped bar charts with many bars and xLabel present, do NOT add extra space (avoid overlap)
8787
+ // For grouped bar charts with many bars and xLabel present, only add 5 if the label is a date
8783
8788
  if (subgroups.length > 1 && data.length > 8 && metaData.xLabel) {
8784
- // In maximized (fullscreen) view, keep the gap minimal
8789
+ const isDateLabel = /\d{2,4}[-\/]/.test(d);
8785
8790
  if (self.chartConfiguration.isFullScreen) {
8786
- return short_tick_length_bg;
8791
+ return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
8787
8792
  }
8788
- return short_tick_length_bg;
8793
+ return isDateLabel ? short_tick_length_bg + 14 : short_tick_length_bg;
8789
8794
  }
8790
8795
  // For grouped bar charts with many bars and NO xLabel, add space as before, but reduce in fullscreen
8791
8796
  if (subgroups.length > 1 && data.length > 8 && !metaData.xLabel) {
@@ -8834,8 +8839,37 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8834
8839
  if (isValueToBeIgnored) {
8835
8840
  return '';
8836
8841
  }
8837
- // If label looks like a date (contains digits and - or /)
8842
+ // Always add space before and after hyphen for date range labels, even when header is visible and label is single line
8843
+ // Apply for grouped bar charts and single bar charts, header visible, single line
8844
+ const dateRangeRegex = /(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})\s*-\s*(\d{2,4}[-\/]\d{2}[-\/]\d{2,4})/;
8845
+ if (dateRangeRegex.test(d.trim())) {
8846
+ return d.trim().replace(dateRangeRegex, (m, d1, d2) => `${d1} - ${d2}`);
8847
+ }
8848
+ // Split date and week labels into two lines in grouped bar zoom-in view (and minimized view)
8838
8849
  const isDateLabel = /\d{2,4}[-\/]/.test(d);
8850
+ const isWeekLabel = /week|wk|w\d+/i.test(d);
8851
+ if (subgroups.length > 1 && !self.isZoomedOut && data.length > 8 && d.indexOf(' ') > -1 && (isDateLabel || isWeekLabel)) {
8852
+ var first = d.substring(0, d.indexOf(' '));
8853
+ var second = d.substring(d.indexOf(' ') + 1).trim();
8854
+ return first + '\n' + second;
8855
+ }
8856
+ // Also keep previous logic for minimized view
8857
+ if (isDateLabel) {
8858
+ if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
8859
+ var first = d.substring(0, d.indexOf(' '));
8860
+ var second = d.substring(d.indexOf(' ') + 1).trim();
8861
+ return first + '\n' + second;
8862
+ }
8863
+ else {
8864
+ return d;
8865
+ }
8866
+ }
8867
+ if (d.trim().indexOf(' ') > -1) {
8868
+ return d.trim().substring(0, d.indexOf(' ')).toLowerCase();
8869
+ }
8870
+ return d.toLowerCase();
8871
+ // If label looks like a date (contains digits and - or /)
8872
+ const isDateLabel2 = /\d{2,4}[-\/]/.test(d);
8839
8873
  // Only split date/week labels if there are many grouped bars and header is not visible
8840
8874
  if (isDateLabel) {
8841
8875
  if (!self.isHeaderVisible && data.length > 8 && d.indexOf(' ') > -1) {
@@ -8852,6 +8886,15 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
8852
8886
  }
8853
8887
  return d.toLowerCase();
8854
8888
  });
8889
+ // Now apply writing-mode: sideways-lr for grouped charts with date labels in zoomed-out view and many bars
8890
+ xAxisLabels.each(function (d) {
8891
+ // Only apply writing-mode for exact date labels, not those containing 'week' or similar
8892
+ const isDateLabel = /^(\d{2,4}[-\/])?\d{2,4}[-\/]\d{2,4}$/.test(d.trim());
8893
+ const isWeekLabel = /week|wk|w\d+/i.test(d);
8894
+ if (subgroups.length > 1 && self.isZoomedOut && data.length > 8 && isDateLabel && !isWeekLabel) {
8895
+ d3.select(this).style('writing-mode', 'sideways-lr');
8896
+ }
8897
+ });
8855
8898
  if (!isMobile) {
8856
8899
  svg
8857
8900
  .selectAll('g.x1.axis1 g.tick')
@@ -9004,20 +9047,19 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9004
9047
  });
9005
9048
  }
9006
9049
  var xSubgroup = d3.scaleBand().domain(subgroups);
9007
- // Weekly shipped/planned daily grouped chart: increase bar width for both zoom-in and zoom-out views
9008
- if (subgroups.length > 1 && this.chartConfiguration.isMultiChartGridLine) {
9009
- xSubgroup.range([0, x.bandwidth() * 1.2]).padding(0.05);
9010
- }
9011
- else if (subgroups.length > 1 && !this.isZoomedOut) {
9050
+ if (subgroups.length > 1 && !this.isZoomedOut) {
9012
9051
  // For grouped bar charts in zoom-in view, reduce padding between bars
9013
- xSubgroup.range([0, x.bandwidth()]).padding(0.05);
9052
+ xSubgroup.range([0, x.bandwidth()]);
9014
9053
  }
9015
9054
  else if (subgroups.length === 1 && !this.isZoomedOut) {
9016
- // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
9017
- xSubgroup.range([0, 80]);
9055
+ // For single-bar (non-grouped) charts in zoom-in view, set bar width to 100 (increased from 80)
9056
+ xSubgroup.range([0, 100]);
9057
+ }
9058
+ else if (this.chartConfiguration.isMultiChartGridLine == undefined) {
9059
+ xSubgroup.range([0, x.bandwidth()]);
9018
9060
  }
9019
9061
  else {
9020
- // All other cases (including zoomed-out), use full bandwidth
9062
+ // used to make grouped bars with lesser width as we are not using padding for width
9021
9063
  xSubgroup.range([0, x.bandwidth()]);
9022
9064
  }
9023
9065
  // if (this.chartConfiguration.isDrilldownChart) {
@@ -9074,7 +9116,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9074
9116
  // Increase bar width a bit in zoom-in view
9075
9117
  let reducedBarWidth = 60;
9076
9118
  if (!self.isZoomedOut) {
9077
- reducedBarWidth = 80;
9119
+ reducedBarWidth = 30;
9078
9120
  }
9079
9121
  if (self.chartData.data.length == 1) {
9080
9122
  if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9099,6 +9141,14 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9099
9141
  });
9100
9142
  return tempScale(d.key);
9101
9143
  }
9144
+ // For grouped bar charts in zoom-in view, increase x value for the first bar only
9145
+ if (subgroups.length > 1 && !self.isZoomedOut) {
9146
+ // Find index of this bar in the data array
9147
+ const barIndex = data.findIndex((indiv) => indiv.name === d.name);
9148
+ if (barIndex === 0) {
9149
+ return xSubgroup(d.key) - 10;
9150
+ }
9151
+ }
9102
9152
  return xSubgroup(d.key);
9103
9153
  })
9104
9154
  .attr('y', function (d) {
@@ -9115,7 +9165,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9115
9165
  .attr('width', function (d) {
9116
9166
  // For grouped bar charts in zoom-in view, slightly increase bar width for both bars (shipped and planned)
9117
9167
  if (subgroups.length > 1 && !self.isZoomedOut) {
9118
- return xSubgroup.bandwidth() * 0.5;
9168
+ return xSubgroup.bandwidth() * 0.3;
9119
9169
  }
9120
9170
  // For single-bar (non-grouped) charts in zoom-in view, set bar width to 80
9121
9171
  if (subgroups.length === 1 && !self.isZoomedOut) {
@@ -9131,7 +9181,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9131
9181
  // Increase bar width a bit in zoom-in view
9132
9182
  let reducedBarWidth = 60;
9133
9183
  if (!self.isZoomedOut) {
9134
- reducedBarWidth = 80;
9184
+ reducedBarWidth = 100;
9135
9185
  }
9136
9186
  if (self.chartData.data.length == 1) {
9137
9187
  if (Object.keys(self.chartData.data[0]).length == 2) {
@@ -9652,7 +9702,7 @@ class HorizontalGroupedBarWithScrollZoomComponent extends ComponentUniqueId {
9652
9702
  }
9653
9703
  const xLabelText = metaData.xLabel;
9654
9704
  const isAcr = isAcronym(xLabelText.replace(/[^A-Za-z]/g, ''));
9655
- const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 10);
9705
+ const xPosition = isria ? (height + margin.top + margin.bottom) : (height + margin.top + margin.bottom + 40);
9656
9706
  svg
9657
9707
  .append('text')
9658
9708
  .attr('class', function () {