mdd-datatooltip-stacked-scatter (#373)

* mdd-datatooltip-stacked-scatter

mdd-datatooltip-stacked-scatter

* mdd-update

mdd-update
added bar and column stacked with data tooltip

Author: mddifilippo89

samples/charts/data-chart/scatter-bubble-chart-single-source/index.html

@@ -17,12 +17,12 @@
     <div id="root">
 
 <div class="container sample">
-
-    <div class="legend-title">
+    
+        <div class="legend-title">
         GDP per Capita vs Population
     </div>
-
-
+    
+    
     <div class="container fill">
         <igc-data-chart
         name="chart"
@@ -51,6 +51,10 @@
             name="BubbleSeries1"
             id ="BubbleSeries1">
             </igc-bubble-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
-import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -18,21 +18,23 @@ export class Sample {
     private xAxis: IgcNumericXAxisComponent
     private yAxis: IgcNumericYAxisComponent
     private bubbleSeries1: IgcBubbleSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
         var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
         var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
         var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
         var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('BubbleSeries1') as IgcBubbleSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             bubbleSeries1.xAxis = this.xAxis
             bubbleSeries1.yAxis = this.yAxis
             bubbleSeries1.dataSource = this.countryStatsEurope
         }
         this._bind();
+
     }
 
     private _countryStatsEurope: CountryStatsEurope = null;
@@ -46,7 +48,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/scatter-bubble-chart-styling/index.html

@@ -17,22 +17,22 @@
     <div id="root">
 
 <div class="container sample">
-
-    <div class="legend-title">
+    
+        <div class="legend-title">
         Total Population of Selected Countries
     </div>
-
+    
     <div class="legend">
         <igc-legend
         orientation="Horizontal"
         name="Legend"
         id ="Legend">
         </igc-legend>
     </div>
-
+    
     <div class="container fill">
         <igc-data-chart
-
+        
         name="chart"
         id ="chart">
             <igc-numeric-x-axis
@@ -77,6 +77,10 @@
             name="BubbleSeries2"
             id ="BubbleSeries2">
             </igc-bubble-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/scatter-bubble-chart-styling/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
-import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
 
@@ -22,7 +22,7 @@ export class Sample {
     private yAxis: IgcNumericYAxisComponent
     private bubbleSeries1: IgcBubbleSeriesComponent
     private bubbleSeries2: IgcBubbleSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
@@ -32,6 +32,7 @@ export class Sample {
         var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
         var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('BubbleSeries1') as IgcBubbleSeriesComponent;
         var bubbleSeries2 = this.bubbleSeries2 = document.getElementById('BubbleSeries2') as IgcBubbleSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             chart.legend = this.legend
@@ -43,6 +44,7 @@ export class Sample {
             bubbleSeries2.dataSource = this.countryStatsEurope
         }
         this._bind();
+
     }
 
     private _countryStatsAfrica: CountryStatsAfrica = null;
@@ -65,7 +67,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/scatter-line-chart/index.html

@@ -71,6 +71,10 @@
             name="ScatterLineSeries2"
             id ="ScatterLineSeries2">
             </igc-scatter-line-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/scatter-line-chart/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
-import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
 import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
 
@@ -23,7 +23,7 @@ export class Sample {
     private yAxis: IgcNumericYAxisComponent
     private scatterLineSeries1: IgcScatterLineSeriesComponent
     private scatterLineSeries2: IgcScatterLineSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
@@ -33,6 +33,7 @@ export class Sample {
         var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
         var scatterLineSeries1 = this.scatterLineSeries1 = document.getElementById('ScatterLineSeries1') as IgcScatterLineSeriesComponent;
         var scatterLineSeries2 = this.scatterLineSeries2 = document.getElementById('ScatterLineSeries2') as IgcScatterLineSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             chart.legend = this.legend
@@ -44,6 +45,7 @@ export class Sample {
             scatterLineSeries2.dataSource = this.healthDataForFrance
         }
         this._bind();
+
     }
 
     private _healthDataForGermany: HealthDataForGermany = null;
@@ -66,7 +68,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/scatter-spline-chart/index.html

@@ -71,6 +71,10 @@
             name="ScatterSplineSeries2"
             id ="ScatterSplineSeries2">
             </igc-scatter-spline-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/scatter-spline-chart/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
-import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSplineSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterSplineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
 import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
 
@@ -23,7 +23,7 @@ export class Sample {
     private yAxis: IgcNumericYAxisComponent
     private scatterSplineSeries1: IgcScatterSplineSeriesComponent
     private scatterSplineSeries2: IgcScatterSplineSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
@@ -33,6 +33,7 @@ export class Sample {
         var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
         var scatterSplineSeries1 = this.scatterSplineSeries1 = document.getElementById('ScatterSplineSeries1') as IgcScatterSplineSeriesComponent;
         var scatterSplineSeries2 = this.scatterSplineSeries2 = document.getElementById('ScatterSplineSeries2') as IgcScatterSplineSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             chart.legend = this.legend
@@ -44,6 +45,7 @@ export class Sample {
             scatterSplineSeries2.dataSource = this.healthDataForFrance
         }
         this._bind();
+
     }
 
     private _healthDataForGermany: HealthDataForGermany = null;
@@ -66,7 +68,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/stacked-100-area-chart/index.html

@@ -87,6 +87,10 @@
                 title="South America">
                 </igc-stacked-fragment-series>
             </igc-stacked-100-area-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/stacked-100-area-chart/package.json

@@ -42,10 +42,11 @@
     "babel-loader": "^8.1.0",
     "babel-plugin-transform-custom-element-classes": "^0.1.0",
     "fork-ts-checker-webpack-plugin": "^4.1.5",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^4.3.0",
     "source-map": "^0.7.3",
     "typescript": "^4.4.4",
-    "webpack": "^4.43.0",
+    "webpack": "^5.74.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0",
     "parcel-bundler": "^1.6.1",
@@ -54,7 +55,6 @@
     "file-loader": "^4.2.0",
     "style-loader": "^0.22.1",
     "xml-loader": "^1.2.1",
-    "worker-loader": "^3.0.8",
-    "tsconfig-paths-webpack-plugin": "^4.0.0"
+    "worker-loader": "^3.0.8"
   }
 }

samples/charts/data-chart/stacked-100-area-chart/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
-import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100AreaSeriesComponent, IgcStackedFragmentSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStacked100AreaSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { ContinentsBirthRateItem, ContinentsBirthRate } from './ContinentsBirthRate';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -26,7 +26,7 @@ export class Sample {
     private s3: IgcStackedFragmentSeriesComponent
     private s4: IgcStackedFragmentSeriesComponent
     private s5: IgcStackedFragmentSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
@@ -40,6 +40,7 @@ export class Sample {
         var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
         var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
         var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             chart.legend = this.legend
@@ -49,6 +50,7 @@ export class Sample {
             stacked100AreaSeries.dataSource = this.continentsBirthRate
         }
         this._bind();
+
     }
 
     private _continentsBirthRate: ContinentsBirthRate = null;
@@ -62,7 +64,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/stacked-100-bar-chart/index.html

@@ -80,6 +80,10 @@
                 title="Other">
                 </igc-stacked-fragment-series>
             </igc-stacked-100-bar-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>

samples/charts/data-chart/stacked-100-bar-chart/src/index.ts

@@ -1,5 +1,5 @@
 import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts';
-import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent } from 'igniteui-webcomponents-charts';
+import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
 import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption';
 
 import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -25,7 +25,7 @@ export class Sample {
     private s2: IgcStackedFragmentSeriesComponent
     private s3: IgcStackedFragmentSeriesComponent
     private s4: IgcStackedFragmentSeriesComponent
-
+    private dataToolTipLayer: IgcDataToolTipLayerComponent
     private _bind: () => void;
 
     constructor() {
@@ -38,6 +38,7 @@ export class Sample {
         var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
         var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
         var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
+        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('DataToolTipLayer') as IgcDataToolTipLayerComponent;
 
         this._bind = () => {
             chart.legend = this.legend
@@ -47,6 +48,7 @@ export class Sample {
             stacked100BarSeries.dataSource = this.energyRenewableConsumption
         }
         this._bind();
+
     }
 
     private _energyRenewableConsumption: EnergyRenewableConsumption = null;
@@ -60,7 +62,6 @@ export class Sample {
 
 
 
-
 }
 
 new Sample();

samples/charts/data-chart/stacked-100-column-chart/index.html

@@ -73,6 +73,10 @@
                 title="Tablet">
                 </igc-stacked-fragment-series>
             </igc-stacked-100-column-series>
+            <igc-data-tool-tip-layer
+            name="DataToolTipLayer"
+            id ="DataToolTipLayer">
+            </igc-data-tool-tip-layer>
         </igc-data-chart>
     </div>
 </div>