fixed various npm build issues (#59)

- Fixed npm rollup issue - Fixed package.json scripts execution - Fixed imports as npm in other projects - Fixed default namings of files - Added types for various components required to generate d.ts files - Modified README.md to reflect latest imports - Adresses issues 36, 37, 38, 39, 40, 43
Azure · Nov 17, 2023 · f9fb729 · f9fb729
1 parent e0ce185
commit f9fb729
Show file tree

Hide file tree

Showing 25 changed files with 7,475 additions and 15,147 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -19,8 +19,10 @@ jobs:
           git config user.name github-actions
           git config user.email [email protected]
     - run: npm ci --legacy-peer-deps
-    - run: npm version patch 
-    - run: npm run webpack
+    - run: |
+          npm version patch -m "Bump release version"
+          git push --follow-tags
+    - run: npm run build
     - run: npm run prepare-samples
     - run: npm run post-build
     - uses: JS-DevTools/npm-publish@v1

diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
@@ -17,6 +17,6 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - run: npm ci --legacy-peer-deps
-    - run: npm run webpack
+    - run: npm run build
     - run: npm run prepare-samples
     - run: npm run post-build
diff --git a/README.md b/README.md
@@ -16,12 +16,12 @@ The KustoTrender JavaScript SDK is a JavaScript library for Microsoft Azure Data
 
 ## Installing
 
-If you use npm, `npm install kustotrender`.
+If you use npm, `npm install azure-kusto-trender`.
 
 To import all of **KustoTrender** into an ES2015 application, import everything into a namespace, like so:
 
 ```js
-import KustoTrender from "kustotrender";
+import KustoTrender from "azure-kusto-trender";
 
 // later, when you want a line chart
 let kustoTrender = new KustoTrender();
@@ -31,18 +31,18 @@ let lineChart = new kustoTrender.ux.LineChart(document.getElementById('chart'));
 You can also import components individually.  If you only need the LineChart, you can import it like so...
 
 ```js
-import LineChart from 'kustotrender/LineChart'
+import LineChart from 'azure-kusto-trender/LineChart'
 
 // later when you want a line chart
 let lineChart = new LineChart(document.getElementById('chart'));
 ```
 Importing individual components can help significantly reduce your bundle size as they work better with tree shaking. This is the recommended approach if your app only consumes specific components.
 
-To import the kustotrender stylesheet into an ES2015 application, import either `kustoTrender.css` or `kustoTrender.min.css`, like so...
+To import the kustotrender stylesheet into an ES2015 application, import either `kustotrender.css` or `kustotrender.min.css`, like so...
 
 ```js
-import 'kustotrender/kustoTrender.css' // Standard styles
-import 'kustotrender/kustoTrender.min.css' // Minified styles
+import 'azure-kusto-trender/kustotrender.css' // Standard styles
+import 'azure-kusto-trender/kustotrender.min.css' // Minified styles
 ```
 
 ## How to run Trender on your Kusto

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,24 +1,24 @@
 {
     "name": "azure-kusto-trender",
-    "main": "kustotrender.js",
+    "main": "dist/kustotrender.js",
     "description": "",
     "version": "0.0.10",
-    "types": "kustotrender.d.ts",
+    "types": "dist/kustotrender.d.ts",
     "repository": {
         "type": "git",
         "url": "https://github.com/Azure/azure-kusto-trender"
     },
     "scripts": {
         "start": "webpack-dev-server --config webpack.dev.js",
-        "build": "npm run clean & npm run rollup & npm run webpack & npm run post-build",
-        "clean": "shx rm -rf dist & shx rm -rf build_artifacts",
-        "rollup": "rollup --c & shx rm dist/kustotrender.js",
+        "build": "npm run clean && npm run rollup && npm run webpack && npm run post-build",
+        "clean": "shx rm -rf dist && shx rm -rf build_artifacts",
+        "rollup": "rollup --c && shx rm dist/kustotrender.js",
         "webpack": "webpack --config webpack.prod.js",
         "copy-package": "shx cp package.json dist/",
         "copy-readme": "shx cp README.md dist/",
-        "prepare-samples": "mkdir pages/examples/dist & shx cp dist/* pages/examples/dist",
+        "prepare-samples": "mkdir pages/examples/dist && shx cp dist/* pages/examples/dist",
         "pack": "cd dist && npm pack",
-        "post-build": "npm run copy-package & npm run copy-readme"
+        "post-build": "npm run copy-package && npm run copy-readme"
     },
     "devDependencies": {
         "@rollup/plugin-commonjs": "^24.1.0",
@@ -33,17 +33,17 @@
         "postcss-url": "^10.1.3",
         "rollup": "^3.21.5",
         "rollup-plugin-auto-external": "^2.0.0",
-        "rollup-plugin-dts": "^5.3.0",
+        "rollup-plugin-dts": "^6.1.0",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-typescript2": "^0.34.1",
-        "rollup-plugin-visualizer": "^5.9.0",
+        "rollup-plugin-visualizer": "^5.9.2",
         "sass-loader": "^13.2.2",
         "shx": "^0.3.4",
         "style-loader": "^3.3.2",
         "terser-webpack-plugin": "^5.3.7",
         "ts-loader": "^9.4.2",
         "tslib": "^2.5.0",
-        "typescript": "^5.0.4",
+        "typescript": "^5.2.2",
         "url-loader": "^4.1.1",
         "webpack": "^5.82.0",
         "webpack-bundle-analyzer": "^4.8.0",
@@ -54,6 +54,7 @@
     "dependencies": {
         "@types/awesomplete": "^1.1.8",
         "@types/d3": "^4.13.0",
+        "@types/d3-shape": "^3.1.5",
         "awesomplete": "^1.1.2",
         "azure-maps-control": "^2.0.26",
         "d3": "^4.13.0",

diff --git a/pages/examples/boilerplate/head.js b/pages/examples/boilerplate/head.js
@@ -1,14 +1,14 @@
 window.addEventListener("DOMContentLoaded", function () {
   var sdkJs = document.createElement("script");
-  sdkJs.src = "../../../dist/kustoTrender.js";
+  sdkJs.src = "../../../dist/kustotrender.js";
 
   var sdkCss = document.createElement("link");
   sdkCss.rel = "stylesheet";
   sdkCss.type = "text/css";
   if (this.window.location.host.startsWith("localhost:")) {
-    sdkCss.href = "../../../dist/kustoTrender.css";
+    sdkCss.href = "../../../dist/kustotrender.css";
   } else {
-    sdkCss.href = "../../../dist/kustoTrender.min.css";
+    sdkCss.href = "../../../dist/kustotrender.min.css";
   }
 
   var metaCharset = document.createElement("meta");

diff --git a/pages/examples/noauth/basiccharts.html b/pages/examples/noauth/basiccharts.html
@@ -13,7 +13,7 @@
     <div id="chart2" style="width: 50%; height: 400px; float: left;"></div>
     <div id="chart3" style="width: 50%; height: 400px; float: right;"></div>
     <div id="chart4" style="width: 100%; height: 500px; float: left;"></div>
-    <div id="chart5" style="width: 100%; height: 500px; float: reft;"></div>
+    <div id="chart5" style="width: 100%; height: 500px; float: left;"></div>
 
     <script>
         window.onload = function () {

diff --git a/pages/examples/testcases/noDataXAxisIssue.html b/pages/examples/testcases/noDataXAxisIssue.html
@@ -1,9 +1,9 @@
 <html>
 
 <head>
-    <script src="../../../dist/kustoTrender.js"></script>
+    <script src="../../../dist/kustotrender.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="../../../dist/kustoTrender.css">
+    <link rel="stylesheet" type="text/css" href="../../../dist/kustotrender.css">
     <meta>
     <meta content="no-cache">
     <style>

diff --git a/pages/examples/withplatform/basiccharts.html b/pages/examples/withplatform/basiccharts.html
@@ -36,7 +36,7 @@
       const bucketSize = "1h";
 
       const result = await cluster.getAggregates(
-        ["283eebcb-d267-4a76-8179-a9b33fb87cf2", "0607cdea-9dd3-4c39-b076-96d020442bca"],
+        ["41804674-3ca7-47fd-9b09-501af4a14a78","bea27065-87f7-471a-a0a2-1d60ab3fdb17","0607cdea-9dd3-4c39-b076-96d020442bca","3b7715ef-3da1-47f8-ac1c-874bcefccbaf","d9b365ae-49ac-4a4e-9cb5-e9675c0f59b0"],
         start,
         end,
         bucketSize
@@ -75,12 +75,13 @@
       var heatmap = new kustoTrender.ux.Heatmap(
         document.getElementById("chart4")
       );
-      heatmap.render(result, {}, [
+      heatmap.render(result, { theme: 'dark' }, [
         {
           searchSpan: {
-            from: start,
-            to: end,
-            bucketSize,
+            from: start.toISOString(),
+            to: end.toISOString(),
+            bucketSize : bucketSize,
+            measureTypes: ['avg']
           },
         },
       ]);

diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -6,7 +6,7 @@ import json from '@rollup/plugin-json';
 import postcss from 'rollup-plugin-postcss'
 import postcssUrl from "postcss-url";
 import autoExternal from 'rollup-plugin-auto-external';
-import visualizer from 'rollup-plugin-visualizer';
+import { visualizer } from 'rollup-plugin-visualizer';
 import dts from "rollup-plugin-dts";
 
 const directImports = {

diff --git a/src/UXClient/Components/CategoricalPlot/CategoricalPlot.ts b/src/UXClient/Components/CategoricalPlot/CategoricalPlot.ts
@@ -128,7 +128,7 @@ class CategoricalPlot extends Plot {
                 categoricalBuckets.enter()
                     .append("rect")
                     .attr("class", "tsi-valueElement tsi-categoricalBucket")
-                    .merge(categoricalBuckets)
+                    .merge(categoricalBuckets as d3.Selection<SVGRectElement,unknown,any,unknown>)
                     .style("visibility", (d: any) => { 
                         return (self.chartComponentData.isSplitByVisible(aggKey, splitBy) && self.hasData(d)) ? "visible" : "hidden";
                     })

diff --git a/src/UXClient/Components/Grid/Grid.ts b/src/UXClient/Components/Grid/Grid.ts
@@ -172,11 +172,11 @@ class Grid extends Component {
                 let aggKey = d[0];
                 let splitBy = d[1];
                 let seriesData = self.convertSeriesToGridData(allTimeStampMap, self.chartComponentData.timeArrays[aggKey][splitBy]);
-                let cells = d3.select(this).selectAll('.tsi-valueCell').data(seriesData);
+                let cells = d3.select(this).selectAll<HTMLTableCellElement, any>('.tsi-valueCell').data(seriesData);
                 let measuresData = self.chartOptions.spMeasures ? self.chartOptions.spMeasures : self.chartComponentData.displayState[aggKey].splitBys[splitBy].types;
 
                 //Row header with the name of the series
-                let headerCell = d3.select(this).selectAll('tsi-rowHeaderCell').data([d]);
+                let headerCell = d3.select(this).selectAll<HTMLTableCellElement, any>('tsi-rowHeaderCell').data([d]);
 
                 let getRowHeaderText = (d) => {
                     return `${self.chartComponentData.displayState[aggKey].name}${(splitBy !== '' ? (': ' + splitBy) : '')}`;
@@ -185,7 +185,7 @@ class Grid extends Component {
                 headerCell.enter()  
                     .append('td')
                     .attr("tabindex", 1)
-                    .merge(headerCell)
+                    .merge(headerCell as d3.Selection<HTMLTableCellElement, any, any, unknown>)
                     .attr('class', (d, col) => `tsi-rowHeaderCell ${self.cellClass(i + 1, 0)}`)
                     .on("keydown", (d, col) => {self.arrowNavigate(d3.event, i + 1, 0)})
                     .attr('aria-label', d => {
@@ -210,7 +210,7 @@ class Grid extends Component {
 
                 cells.enter()
                     .append('td')
-                    .merge(cells)
+                    .merge(cells as d3.Selection<HTMLTableCellElement, any, any, unknown>)
                     .attr('class', (d, col) => `tsi-valueCell ${self.cellClass(i + 1, col + 1)}`)
                     .on("keydown", (d, col) => {self.arrowNavigate(d3.event, i + 1, col + 1)})
                     .attr("tabindex", 1)

diff --git a/src/UXClient/Components/GroupedBarChart/GroupedBarChart.ts b/src/UXClient/Components/GroupedBarChart/GroupedBarChart.ts
@@ -8,6 +8,7 @@ import { GroupedBarChartData } from '../../Models/GroupedBarChartData';
 import ContextMenu from './../ContextMenu';
 import Tooltip from '../Tooltip';
 import { ChartVisualizationComponent } from '../../Interfaces/ChartVisualizationComponent';
+import {BaseType} from "d3";
 
 class GroupedBarChart extends ChartVisualizationComponent {
     private contextMenu: ContextMenu;
@@ -283,7 +284,7 @@ class GroupedBarChart extends ChartVisualizationComponent {
                 barGroups = barGroups.enter()
                     .append("g")
                     .attr("class", "barGroup")
-                    .merge(barGroups)
+                    .merge(barGroups as d3.Selection<SVGGElement, string, SVGGElement, unknown>)
                     .attr("display", (d, i) => {return (this.chartComponentData.displayState[d].visible ? "inherit" : "none");})
                     .attr("visibility", "visible")
                     .attr("transform",(d, i) => {
@@ -342,7 +343,7 @@ class GroupedBarChart extends ChartVisualizationComponent {
                         .attr("dy", ".71em");
                     Utils.appendFormattedElementsFromString(labelGroupText, self.chartComponentData.displayState[aggKey].name, {inSvg: true, additionalClassName: "tsi-aggregateLabelGroupText"});
 
-                    var labelGroupBox: any = labelGroupEntered.merge(labelGroup)
+                    var labelGroupBox: any = labelGroupEntered.merge(labelGroup as d3.Selection<SVGGElement, string, BaseType, unknown>)
                         .select("rect")
                         .attr("class", 'aggregateLabelBox')
                         .attr("x", 0)
@@ -436,7 +437,7 @@ class GroupedBarChart extends ChartVisualizationComponent {
                     }
 
                     var splitByColors = Utils.createSplitByColors(self.chartComponentData.displayState, aggKey, self.chartOptions.keepSplitByColor);
-                    valueElementsEntered.merge(valueElements)
+                    valueElementsEntered.merge(valueElements as d3.Selection<SVGGElement, any, BaseType, unknown>)
                         .select("rect") 
                         .attr("fill", (d, j) => {
                             return splitByColors[j];
@@ -532,7 +533,7 @@ class GroupedBarChart extends ChartVisualizationComponent {
                             return 0;
                         });
 
-                        valueElementsEntered.merge(valueElements)
+                        valueElementsEntered.merge(valueElements as d3.Selection<SVGGElement, any, BaseType, unknown>)
                         .select("line")
                         .classed("tsi-baseLine", true)
                         .attr("stroke-width", 2)

diff --git a/src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts b/src/UXClient/Components/HierarchyNavigation/HierarchyNavigation.ts
@@ -1852,7 +1852,7 @@ class HierarchyNavigation extends Component {
           .each(function (d) {
             Utils.appendFormattedElementsFromString(d3.select(this), d);
           })
-          .merge(cells);
+          .merge(cells as d3.Selection<HTMLTableCellElement,unknown, HTMLTableRowElement,any>);
         cells.exit().remove();
         rows.exit().remove();
 
@@ -1924,7 +1924,7 @@ class HierarchyNavigation extends Component {
       .each(function (d) {
         Utils.appendFormattedElementsFromString(d3.select(this), d);
       })
-      .merge(cells);
+      .merge(cells as d3.Selection<HTMLTableCellElement,unknown,HTMLTableRowElement,any>);
     cells.exit().remove();
     rows.exit().remove();
 

diff --git a/src/UXClient/Components/Legend/Legend.ts b/src/UXClient/Components/Legend/Legend.ts
@@ -4,6 +4,7 @@ import Utils from "../../Utils";
 import { DataTypes, EventElementTypes } from "./../../Constants/Enums";
 import {Component} from "./../../Interfaces/Component";
 import { ChartComponentData } from '../../Models/ChartComponentData';
+import {BaseType} from "d3";
 
 const NUMERICSPLITBYHEIGHT = 44;
 const NONNUMERICSPLITBYHEIGHT = 24; 
@@ -251,7 +252,7 @@ class Legend extends Component {
                 let colorKeyEntered = colorKey.enter()
                     .append("div")
                     .attr("class", 'tsi-colorKey')
-                    .merge(colorKey);
+                    .merge(colorKey as d3.Selection<HTMLDivElement, unknown, null, undefined>);
                 if (dataType === DataTypes.Numeric) {
                     colorKeyEntered.style('background-color', (d) => {
                         return d;
@@ -321,7 +322,7 @@ class Legend extends Component {
                             .enter()
                             .append("option")
                             .attr("class", "seriesTypeLabel")
-                            .merge(typeLabels)
+                            .merge(typeLabels as d3.Selection<HTMLOptionElement,unknown,BaseType,unknown>)
                             .property("selected", (data: any) => {
                                 return ((data.type == Utils.getAgVisibleMeasure(self.chartComponentData.displayState, data.aggKey, data.splitBy)) ? 
                                         " selected" : "");
@@ -423,7 +424,7 @@ class Legend extends Component {
             var seriesNameLabel = d3.select(this).selectAll(".tsi-seriesNameLabel").data([aggKey]);
             d3.select(this).classed('tsi-nsb', noSplitBys);
             var enteredSeriesNameLabel = seriesNameLabel.enter().append("button")
-                .merge(seriesNameLabel)
+                .merge(seriesNameLabel as d3.Selection<HTMLButtonElement, string, any, unknown>)
                 .attr("class", (agg: string, i) => {
                     return "tsi-seriesNameLabel" + (self.chartComponentData.displayState[agg].visible ? " shown" : "");
                 }) 
@@ -455,15 +456,15 @@ class Legend extends Component {
                 let colorKeyEntered = colorKey.enter()
                     .append("div")
                     .attr("class", 'tsi-colorKey')
-                    .merge(colorKey);
+                    .merge(colorKey as d3.Selection<HTMLDivElement,string,HTMLButtonElement,string>);
                 self.createNonNumericColorKey(dataType, colorKeyEntered, aggKey);
                 colorKey.exit().remove();
             }
 
             var seriesNameLabelText = enteredSeriesNameLabel.selectAll("h4").data([aggKey]);
             seriesNameLabelText.enter()
                 .append("h4")
-                .merge(seriesNameLabelText)
+                .merge(seriesNameLabelText as d3.Selection<HTMLHeadingElement,string,HTMLButtonElement,string>)
                 .attr("title", (d: string) => Utils.stripNullGuid(self.chartComponentData.displayState[d].name))
                 .each(function() {
                     Utils.appendFormattedElementsFromString(d3.select(this), self.chartComponentData.displayState[aggKey].name);
@@ -492,7 +493,7 @@ class Legend extends Component {
 
             var splitByContainer = d3.select(this).selectAll(".tsi-splitByContainer").data([aggKey]);
             var splitByContainerEntered = splitByContainer.enter().append("div")
-                .merge(splitByContainer)
+                .merge(splitByContainer as d3.Selection<HTMLDivElement,string,any,unknown>)
                 .classed("tsi-splitByContainer", true);
 
             let aggSelection = d3.select(this);

diff --git a/src/UXClient/Components/LineChart/LineChart.ts b/src/UXClient/Components/LineChart/LineChart.ts
@@ -1381,7 +1381,7 @@ class LineChart extends TemporalXAxisComponent {
                 valueText
                     .enter() 
                     .append('text')
-                    .merge(valueText)
+                    .merge(valueText as d3.Selection<SVGTextElement, any, any, unknown>)
                     .attr('class', 'tsi-horizontalMarkerText')
                     .attr('x', self.chartWidth)
                     .attr('y', -4)
@@ -1394,7 +1394,7 @@ class LineChart extends TemporalXAxisComponent {
                 valueLine
                     .enter()
                     .append('line')
-                    .merge(valueLine)
+                    .merge(valueLine as d3.Selection<SVGLineElement, any, any, unknown>)
                     .attr('class', 'tsi-horizontalMarkerLine')
                     .attr('stroke', marker => marker.color)
                     .attr('x1', 0)