diff --git a/samples/charts/dashboard-tile/gauge-dashboard/src/DashboardGaugeDataSource.ts b/samples/charts/dashboard-tile/gauge-dashboard/src/DashboardGaugeDataSource.ts new file mode 100644 index 000000000..b739114e0 --- /dev/null +++ b/samples/charts/dashboard-tile/gauge-dashboard/src/DashboardGaugeDataSource.ts @@ -0,0 +1,23 @@ +export class DashboardGaugeDataSourceItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public value: number; + +} +export class DashboardGaugeDataSource extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new DashboardGaugeDataSourceItem( + { + value: 40 + }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/charts/dashboard-tile/gauge-dashboard/src/index.ts b/samples/charts/dashboard-tile/gauge-dashboard/src/index.ts index 3e08177d4..015cf61a8 100644 --- a/samples/charts/dashboard-tile/gauge-dashboard/src/index.ts +++ b/samples/charts/dashboard-tile/gauge-dashboard/src/index.ts @@ -1,5 +1,6 @@ import { IgcDashboardTileModule, IgcDataChartDashboardTileModule, IgcGeographicMapDashboardTileModule, IgcLinearGaugeDashboardTileModule, IgcPieChartDashboardTileModule, IgcRadialGaugeDashboardTileModule } from 'igniteui-webcomponents-dashboards'; import { IgcDashboardTileComponent } from 'igniteui-webcomponents-dashboards'; +import { DashboardGaugeDataSourceItem, DashboardGaugeDataSource } from './DashboardGaugeDataSource'; import { ModuleManager } from 'igniteui-webcomponents-core'; @@ -17,19 +18,25 @@ ModuleManager.register( export class Sample { private dashboard: IgcDashboardTileComponent + private _bind: () => void; constructor() { var dashboard = this.dashboard = document.getElementById('dashboard') as IgcDashboardTileComponent; - this.dashboardTileGaugeOnInit(); - } - + this._bind = () => { + dashboard.dataSource = this.dashboardGaugeDataSource; + } + this._bind(); - public dashboardTileGaugeOnInit(): void { - - var target = this.dashboard; + } - target.dataSource = 40; + private _dashboardGaugeDataSource: DashboardGaugeDataSource = null; + public get dashboardGaugeDataSource(): DashboardGaugeDataSource { + if (this._dashboardGaugeDataSource == null) + { + this._dashboardGaugeDataSource = new DashboardGaugeDataSource(); + } + return this._dashboardGaugeDataSource; } } diff --git a/samples/charts/data-chart/radial-label-mode/index.html b/samples/charts/data-chart/radial-label-mode/index.html index 3b329bcc8..264ddd24e 100644 --- a/samples/charts/data-chart/radial-label-mode/index.html +++ b/samples/charts/data-chart/radial-label-mode/index.html @@ -20,13 +20,13 @@
{ propertyEditorPanel1.componentRenderer = this.renderer; - propertyEditorPanel1.target = this.angleAxis; + propertyEditorPanel1.target = this.chart; chart.legend = this.legend; angleAxis.dataSource = this.footballPlayerStats; radialColumnSeries1.dataSource = this.footballPlayerStats; diff --git a/samples/charts/data-chart/selection-matcher/.prettierrc b/samples/charts/data-chart/selection-matcher/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/charts/data-chart/selection-matcher/index.html b/samples/charts/data-chart/selection-matcher/index.html new file mode 100644 index 000000000..8ca117e38 --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/index.html @@ -0,0 +1,97 @@ + + + + Sample | Ignite UI | Web Components | infragistics + + + + + + + + + + + + +
+ +
+ +
+ Renewable Energy Consumption +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + + +
+
+ +
+ + + <% if (false) { %><% } %> + + \ No newline at end of file diff --git a/samples/charts/data-chart/selection-matcher/package.json b/samples/charts/data-chart/selection-matcher/package.json new file mode 100644 index 000000000..978b6ce2d --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/package.json @@ -0,0 +1,57 @@ +{ + "name": "example-ignite-ui-web-components", + "description": "This project provides example of using Ignite UI for Web Components", + "author": "Infragistics", + "version": "1.0.0", + "license": "", + "private": true, + "homepage": ".", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "dependencies": { + "babel-runtime": "^6.26.0", + "igniteui-webcomponents-charts": "5.2.0", + "igniteui-webcomponents-core": "5.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + } +} diff --git a/samples/charts/data-chart/selection-matcher/sandbox.config.json b/samples/charts/data-chart/selection-matcher/sandbox.config.json new file mode 100644 index 000000000..52c787510 --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} \ No newline at end of file diff --git a/samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts b/samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts new file mode 100644 index 000000000..f742bbef3 --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/src/EnergyRenewableConsumption.ts @@ -0,0 +1,69 @@ +export class EnergyRenewableConsumptionItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public location: string; + public year: number; + public hydro: number; + public solar: number; + public wind: number; + public other: number; + +} +export class EnergyRenewableConsumption extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new EnergyRenewableConsumptionItem( + { + location: `China`, + year: 2019, + hydro: 1269.5, + solar: 223, + wind: 405.2, + other: 102.8 + }), + new EnergyRenewableConsumptionItem( + { + location: `Europe`, + year: 2019, + hydro: 632.54, + solar: 154, + wind: 461.3, + other: 220.3 + }), + new EnergyRenewableConsumptionItem( + { + location: `USA`, + year: 2019, + hydro: 271.16, + solar: 108, + wind: 303.4, + other: 78.34 + }), + new EnergyRenewableConsumptionItem( + { + location: `Brazil`, + year: 2019, + hydro: 399.3, + solar: 5.5, + wind: 55.83, + other: 56.25 + }), + new EnergyRenewableConsumptionItem( + { + location: `Canada`, + year: 2019, + hydro: 381.98, + solar: 4.3, + wind: 34.17, + other: 10.81 + }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/charts/data-chart/selection-matcher/src/index.css b/samples/charts/data-chart/selection-matcher/src/index.css new file mode 100644 index 000000000..8b42ec3ed --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/src/index.css @@ -0,0 +1,3 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + diff --git a/samples/charts/data-chart/selection-matcher/src/index.ts b/samples/charts/data-chart/selection-matcher/src/index.ts new file mode 100644 index 000000000..b6ff61922 --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/src/index.ts @@ -0,0 +1,99 @@ +import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from 'igniteui-webcomponents-charts'; +import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcStacked100BarSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts'; +import { EnergyRenewableConsumptionItem, EnergyRenewableConsumption } from './EnergyRenewableConsumption'; +import { IgcCategoryChartComponent, IgcChartSelection, IgcSeriesMatcher } from 'igniteui-webcomponents-charts'; + +import { ModuleManager } from 'igniteui-webcomponents-core'; + +import "./index.css"; + +ModuleManager.register( + IgcLegendModule, + IgcDataChartCoreModule, + IgcDataChartCategoryModule, + IgcDataChartCategoryCoreModule, + IgcDataChartInteractivityModule, + IgcDataChartAnnotationModule, + IgcDataChartStackedModule, + IgcStackedFragmentSeriesModule +); + +export class Sample { + + private legend: IgcLegendComponent + private chart: IgcDataChartComponent + private yAxis: IgcCategoryYAxisComponent + private xAxis: IgcNumericXAxisComponent + private stacked100BarSeries: IgcStacked100BarSeriesComponent + private s1: IgcStackedFragmentSeriesComponent + private s2: IgcStackedFragmentSeriesComponent + private s3: IgcStackedFragmentSeriesComponent + private s4: IgcStackedFragmentSeriesComponent + private dataToolTipLayer: IgcDataToolTipLayerComponent + private _bind: () => void; + + constructor() { + var legend = this.legend = document.getElementById('legend') as IgcLegendComponent; + var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent; + var yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent; + var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent; + var stacked100BarSeries = this.stacked100BarSeries = document.getElementById('stacked100BarSeries') as IgcStacked100BarSeriesComponent; + var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent; + 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; + yAxis.dataSource = this.energyRenewableConsumption; + stacked100BarSeries.dataSource = this.energyRenewableConsumption; + stacked100BarSeries.xAxis = this.xAxis; + stacked100BarSeries.yAxis = this.yAxis; + } + this._bind(); + + this.selectionMatcherOnViewInit(); + } + + private _energyRenewableConsumption: EnergyRenewableConsumption = null; + public get energyRenewableConsumption(): EnergyRenewableConsumption { + if (this._energyRenewableConsumption == null) + { + this._energyRenewableConsumption = new EnergyRenewableConsumption(); + } + return this._energyRenewableConsumption; + } + + + private _timer: ReturnType; + + public selectionMatcherOnViewInit(): void { + + var chart = this.chart; + + this._timer = setInterval(() => { + var data = this.energyRenewableConsumption; + let matcher: IgcSeriesMatcher = new IgcSeriesMatcher(); + + let selection: IgcChartSelection = new IgcChartSelection(); + selection.item = data[1]; + matcher.memberPath = "hydro"; + matcher.memberPathType = "ValueMemberPath"; + selection.matcher = matcher; + chart.selectedSeriesItems.add(selection); + + let selection2: IgcChartSelection = new IgcChartSelection(); + selection2.item = data[2]; + matcher.memberPath = "wind"; + matcher.memberPathType = "ValueMemberPath"; + selection2.matcher = matcher; + + chart.selectedSeriesItems.add(selection2); + + }, 100); + } + +} + +new Sample(); diff --git a/samples/charts/data-chart/selection-matcher/tsconfig.json b/samples/charts/data-chart/selection-matcher/tsconfig.json new file mode 100644 index 000000000..e7c370def --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/tsconfig.json @@ -0,0 +1,41 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "resolveJsonModule": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true, + "strictNullChecks": false, + "baseUrl": ".", + "paths": { + "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ], + "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ], + "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ], + "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ], + "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ], + "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ], + "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ], + "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ], + "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ], + "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ], + "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ], + "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ], + "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ], + "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ], + "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ], + "igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ] + } + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/charts/data-chart/selection-matcher/tslint.json b/samples/charts/data-chart/selection-matcher/tslint.json new file mode 100644 index 000000000..e3b56e93a --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/tslint.json @@ -0,0 +1,54 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "linterOptions": { + "exclude": [ + "node_modules/**/*.ts", + "**/odatajs-4.0.0.js", + "src/images/*.*" + ] + }, + "rules": { + "curly": [false, "ignore-same-line"], + "jsx-no-lambda": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "max-classes-per-file": [true, 10], + "member-ordering": false, + "no-console": false, + "no-string-literal": false, + "no-unused-vars": false, + "no-useless-constructor": false, + "no-trailing-whitespace": false, + "no-var": false, + "no-var-requires": false, + "no-var-keyword": false, + "ordered-imports": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "only-arrow-functions": false, + "prefer-const": false, + "prefer-for-of": false, + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/type-annotation-spacing": "off" + }, + "jsRules": { + "curly": [false, "ignore-same-line"], + "jsx-no-lambda": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "max-classes-per-file": [true, 10], + "no-console": false, + "no-unused-vars": false, + "no-useless-constructor": false, + "no-var-requires": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "only-arrow-functions": false, + "ordered-imports": false, + "prefer-const": false, + "prefer-for-of": false, + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-useless-constructor": "off" + } + } \ No newline at end of file diff --git a/samples/charts/data-chart/selection-matcher/webpack.config.js b/samples/charts/data-chart/selection-matcher/webpack.config.js new file mode 100644 index 000000000..1de7f0827 --- /dev/null +++ b/samples/charts/data-chart/selection-matcher/webpack.config.js @@ -0,0 +1,103 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/charts/data-pie-chart/animation-replay/.prettierrc b/samples/charts/data-pie-chart/animation-replay/.prettierrc new file mode 100644 index 000000000..15a7c7c6c --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ No newline at end of file diff --git a/samples/charts/data-pie-chart/animation-replay/index.html b/samples/charts/data-pie-chart/animation-replay/index.html new file mode 100644 index 000000000..18f7f6c81 --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/index.html @@ -0,0 +1,60 @@ + + + + Sample | Ignite UI | Web Components | infragistics + + + + + + + + + + + + +
+ +
+
+ + + + +
+ +
+ Global Electricity Demand by Energy Use +
+ +
+ + +
+
+ +
+ + + <% if (false) { %><% } %> + + \ No newline at end of file diff --git a/samples/charts/data-pie-chart/animation-replay/package.json b/samples/charts/data-pie-chart/animation-replay/package.json new file mode 100644 index 000000000..84b45d65b --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/package.json @@ -0,0 +1,60 @@ +{ + "name": "example-ignite-ui-web-components", + "description": "This project provides example of using Ignite UI for Web Components", + "author": "Infragistics", + "version": "1.0.0", + "license": "", + "private": true, + "homepage": ".", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "dependencies": { + "babel-runtime": "^6.26.0", + "igniteui-webcomponents": "5.2.1", + "igniteui-webcomponents-charts": "5.2.0", + "igniteui-webcomponents-core": "5.2.0", + "igniteui-webcomponents-inputs": "5.2.0", + "igniteui-webcomponents-layouts": "5.2.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-proposal-class-properties": "^7.8.3", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^4.1.5", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^4.4.4", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + } +} diff --git a/samples/charts/data-pie-chart/animation-replay/sandbox.config.json b/samples/charts/data-pie-chart/animation-replay/sandbox.config.json new file mode 100644 index 000000000..52c787510 --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/sandbox.config.json @@ -0,0 +1,6 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} \ No newline at end of file diff --git a/samples/charts/data-pie-chart/animation-replay/src/EnergyGlobalDemand.ts b/samples/charts/data-pie-chart/animation-replay/src/EnergyGlobalDemand.ts new file mode 100644 index 000000000..3d2ed388a --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/src/EnergyGlobalDemand.ts @@ -0,0 +1,51 @@ +export class EnergyGlobalDemandItem { + public constructor(init: Partial) { + Object.assign(this, init); + } + + public value: number; + public category: string; + public summary: string; + +} +export class EnergyGlobalDemand extends Array { + public constructor(items: Array | number = -1) { + if (Array.isArray(items)) { + super(...items); + } else { + const newItems = [ + new EnergyGlobalDemandItem( + { + value: 37, + category: `Cooling`, + summary: `Cooling 37%` + }), + new EnergyGlobalDemandItem( + { + value: 25, + category: `Residential`, + summary: `Residential 25%` + }), + new EnergyGlobalDemandItem( + { + value: 12, + category: `Heating`, + summary: `Heating 12%` + }), + new EnergyGlobalDemandItem( + { + value: 11, + category: `Lighting`, + summary: `Lighting 11%` + }), + new EnergyGlobalDemandItem( + { + value: 15, + category: `Other`, + summary: `Other 15%` + }), + ]; + super(...newItems.slice(0)); + } + } +} diff --git a/samples/charts/data-pie-chart/animation-replay/src/index.css b/samples/charts/data-pie-chart/animation-replay/src/index.css new file mode 100644 index 000000000..8b42ec3ed --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/src/index.css @@ -0,0 +1,3 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ + diff --git a/samples/charts/data-pie-chart/animation-replay/src/index.ts b/samples/charts/data-pie-chart/animation-replay/src/index.ts new file mode 100644 index 000000000..778ced467 --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/src/index.ts @@ -0,0 +1,74 @@ +import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts'; +import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts'; +import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core'; +import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts'; +import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts'; +import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand'; +import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts'; +import { XamDomainChart } from 'igniteui-webcomponents-charts'; + +import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { defineAllComponents } from 'igniteui-webcomponents'; +import { ModuleManager } from 'igniteui-webcomponents-core'; +defineAllComponents(); + +import "./index.css"; + +ModuleManager.register( + IgcPropertyEditorPanelModule, + IgcDataPieChartModule, + IgcItemLegendModule +); + +export class Sample { + + private propertyEditorPanel1: IgcPropertyEditorPanelComponent + private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent + private chart: IgcDataPieChartComponent + private _bind: () => void; + + constructor() { + var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent; + var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent; + this.editorButtonReplayTransitionInDomain = this.editorButtonReplayTransitionInDomain.bind(this); + var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent; + + this._bind = () => { + propertyEditorPanel1.componentRenderer = this.renderer; + propertyEditorPanel1.target = this.chart; + propertyEditorPropertyDescription1.buttonClicked = this.editorButtonReplayTransitionInDomain; + chart.dataSource = this.energyGlobalDemand; + } + this._bind(); + + } + + private _energyGlobalDemand: EnergyGlobalDemand = null; + public get energyGlobalDemand(): EnergyGlobalDemand { + if (this._energyGlobalDemand == null) + { + this._energyGlobalDemand = new EnergyGlobalDemand(); + } + return this._energyGlobalDemand; + } + + private _componentRenderer: ComponentRenderer = null; + public get renderer(): ComponentRenderer { + if (this._componentRenderer == null) { + this._componentRenderer = new ComponentRenderer(); + var context = this._componentRenderer.context; + PropertyEditorPanelDescriptionModule.register(context); + DataPieChartDescriptionModule.register(context); + ItemLegendDescriptionModule.register(context); + } + return this._componentRenderer; + } + + public editorButtonReplayTransitionInDomain(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void { + var chart = this.chart; + chart.replayTransitionIn(); + } + +} + +new Sample(); diff --git a/samples/charts/data-pie-chart/animation-replay/tsconfig.json b/samples/charts/data-pie-chart/animation-replay/tsconfig.json new file mode 100644 index 000000000..e7c370def --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/tsconfig.json @@ -0,0 +1,41 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "resolveJsonModule": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true, + "strictNullChecks": false, + "baseUrl": ".", + "paths": { + "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ], + "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ], + "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ], + "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ], + "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ], + "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ], + "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ], + "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ], + "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ], + "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ], + "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ], + "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ], + "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ], + "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ], + "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ], + "igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ] + } + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/charts/data-pie-chart/animation-replay/tslint.json b/samples/charts/data-pie-chart/animation-replay/tslint.json new file mode 100644 index 000000000..e3b56e93a --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/tslint.json @@ -0,0 +1,54 @@ +{ + "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"], + "linterOptions": { + "exclude": [ + "node_modules/**/*.ts", + "**/odatajs-4.0.0.js", + "src/images/*.*" + ] + }, + "rules": { + "curly": [false, "ignore-same-line"], + "jsx-no-lambda": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "max-classes-per-file": [true, 10], + "member-ordering": false, + "no-console": false, + "no-string-literal": false, + "no-unused-vars": false, + "no-useless-constructor": false, + "no-trailing-whitespace": false, + "no-var": false, + "no-var-requires": false, + "no-var-keyword": false, + "ordered-imports": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "only-arrow-functions": false, + "prefer-const": false, + "prefer-for-of": false, + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/type-annotation-spacing": "off" + }, + "jsRules": { + "curly": [false, "ignore-same-line"], + "jsx-no-lambda": false, + "jsx-self-close": false, + "jsx-wrap-multiline": false, + "max-classes-per-file": [true, 10], + "no-console": false, + "no-unused-vars": false, + "no-useless-constructor": false, + "no-var-requires": false, + "object-literal-sort-keys": false, + "object-literal-shorthand": false, + "only-arrow-functions": false, + "ordered-imports": false, + "prefer-const": false, + "prefer-for-of": false, + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-useless-constructor": "off" + } + } \ No newline at end of file diff --git a/samples/charts/data-pie-chart/animation-replay/webpack.config.js b/samples/charts/data-pie-chart/animation-replay/webpack.config.js new file mode 100644 index 000000000..1de7f0827 --- /dev/null +++ b/samples/charts/data-pie-chart/animation-replay/webpack.config.js @@ -0,0 +1,103 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-proposal-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +}; diff --git a/samples/charts/data-pie-chart/selection/index.html b/samples/charts/data-pie-chart/selection/index.html index 817051e55..19e4e72a1 100644 --- a/samples/charts/data-pie-chart/selection/index.html +++ b/samples/charts/data-pie-chart/selection/index.html @@ -26,8 +26,14 @@ name="propertyEditorPanel1" id="propertyEditorPanel1"> void; constructor() { var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent; + var selectionBehavior = this.selectionBehavior = document.getElementById('SelectionBehavior') as IgcPropertyEditorPropertyDescriptionComponent; var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent; this._bind = () => {