Skip to content

Commit 1b58802

Browse files
niiloArctionniiloArction
committed
1 parent 339bbed commit 1b58802

File tree

4 files changed

+167
-167
lines changed

4 files changed

+167
-167
lines changed

‎.gitignore

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
node_modules
2-
dist
1+
node_modules
2+
dist
33
package-lock.json

‎package.json

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
{
2-
"version": "1.0.1",
3-
"scripts": {
4-
"build": "webpack --mode production",
5-
"start": "webpack-dev-server"
6-
},
7-
"license": "Custom",
8-
"private": true,
9-
"main": "./src/index.js",
10-
"devDependencies": {
11-
"copy-webpack-plugin": "^6.0.2",
12-
"html-webpack-plugin": "^3.2.0",
13-
"webpack-cli": "^3.3.10",
14-
"webpack-dev-server": "^3.9.0"
15-
},
16-
"dependencies": {
17-
"@arction/lcjs": "^3.2.0",
18-
"@arction/xydata": "^1.4.0",
19-
"clean-webpack-plugin": "^3.0.0",
20-
"webpack": "^4.41.2",
21-
"webpack-stream": "^5.2.1"
22-
}
23-
}
1+
{
2+
"version": "1.0.1",
3+
"scripts": {
4+
"build": "webpack --mode production",
5+
"start": "webpack-dev-server"
6+
},
7+
"license": "Custom",
8+
"private": true,
9+
"main": "./src/index.js",
10+
"devDependencies": {
11+
"copy-webpack-plugin": "^6.0.2",
12+
"html-webpack-plugin": "^3.2.0",
13+
"webpack-cli": "^3.3.10",
14+
"webpack-dev-server": "^3.9.0"
15+
},
16+
"dependencies": {
17+
"@arction/lcjs": "^3.2.0",
18+
"@arction/xydata": "^1.4.0",
19+
"clean-webpack-plugin": "^3.0.0",
20+
"webpack": "^4.41.2",
21+
"webpack-stream": "^5.2.1"
22+
}
23+
}

‎src/index.js

Lines changed: 65 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,65 @@
1-
/*
2-
* LightningChartJS example that shows the creation and styling of a Pyramid chart.
3-
*/
4-
// Import LightningChartJS
5-
const lcjs = require('@arction/lcjs')
6-
7-
// Extract required parts from LightningChartJS.
8-
const {
9-
PyramidChartTypes,
10-
PyramidLabelSide,
11-
SliceLabelFormatters,
12-
lightningChart,
13-
LegendBoxBuilders,
14-
Themes
15-
} = lcjs
16-
17-
// Create a Pyramid chart
18-
const pyramid = lightningChart()
19-
.Pyramid({
20-
// theme: Themes.darkGold
21-
type: PyramidChartTypes.LabelsOnSides
22-
})
23-
.setTitle('Company staff growth')
24-
.setAnimationsEnabled(true)
25-
.setNeckWidth(80)
26-
.setSliceGap(5)
27-
.setPadding({ bottom: 45 })
28-
.setLabelSide(PyramidLabelSide.Right)
29-
30-
// Data for slices
31-
const data = [
32-
{
33-
name: '2015 - 2016',
34-
value: 3
35-
},
36-
{
37-
name: '2016 - 2017',
38-
value: 5
39-
},
40-
{
41-
name: '2017 - 2018',
42-
value: 10
43-
},
44-
{
45-
name: '2018 - 2019',
46-
value: 17
47-
}
48-
]
49-
// Add data to the slices
50-
pyramid.addSlices(data)
51-
52-
// Set formatter of Slice Labels
53-
pyramid.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
54-
55-
// Add LegendBox and define the position in the chart
56-
const lb = pyramid
57-
.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
58-
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
59-
.setAutoDispose({
60-
type: 'max-width',
61-
maxWidth: 0.80,
62-
})
63-
64-
// Add the Pyramid to the LegendBox and disable the button click functionality.
65-
lb.add(pyramid, { disposeOnClick: false })
1+
/*
2+
* LightningChartJS example that shows the creation and styling of a Pyramid chart.
3+
*/
4+
// Import LightningChartJS
5+
const lcjs = require('@arction/lcjs')
6+
7+
// Extract required parts from LightningChartJS.
8+
const {
9+
PyramidChartTypes,
10+
PyramidLabelSide,
11+
SliceLabelFormatters,
12+
lightningChart,
13+
LegendBoxBuilders,
14+
Themes
15+
} = lcjs
16+
17+
// Create a Pyramid chart
18+
const pyramid = lightningChart()
19+
.Pyramid({
20+
// theme: Themes.darkGold
21+
type: PyramidChartTypes.LabelsOnSides
22+
})
23+
.setTitle('Company staff growth')
24+
.setAnimationsEnabled(true)
25+
.setNeckWidth(80)
26+
.setSliceGap(5)
27+
.setPadding({ bottom: 45 })
28+
.setLabelSide(PyramidLabelSide.Right)
29+
30+
// Data for slices
31+
const data = [
32+
{
33+
name: '2015 - 2016',
34+
value: 3
35+
},
36+
{
37+
name: '2016 - 2017',
38+
value: 5
39+
},
40+
{
41+
name: '2017 - 2018',
42+
value: 10
43+
},
44+
{
45+
name: '2018 - 2019',
46+
value: 17
47+
}
48+
]
49+
// Add data to the slices
50+
pyramid.addSlices(data)
51+
52+
// Set formatter of Slice Labels
53+
pyramid.setLabelFormatter(SliceLabelFormatters.NamePlusValue)
54+
55+
// Add LegendBox and define the position in the chart
56+
const lb = pyramid
57+
.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
58+
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
59+
.setAutoDispose({
60+
type: 'max-width',
61+
maxWidth: 0.80,
62+
})
63+
64+
// Add the Pyramid to the LegendBox and disable the button click functionality.
65+
lb.add(pyramid, { disposeOnClick: false })

‎webpack.config.js

Lines changed: 77 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,77 @@
1-
const HtmlWebpackPlugin = require('html-webpack-plugin')
2-
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
3-
const CopyWebpackPlugin = require('copy-webpack-plugin')
4-
const path = require('path')
5-
6-
const targetFolderName = 'dist'
7-
const outputPath = path.resolve(__dirname, targetFolderName)
8-
const packageJSON = require('./package.json')
9-
10-
11-
module.exports = {
12-
mode: 'development',
13-
entry: {
14-
app: packageJSON.main
15-
},
16-
node: {
17-
buffer: false,
18-
setImmediate: false
19-
},
20-
devServer: {
21-
contentBase: outputPath,
22-
compress: true,
23-
// handle asset renaming
24-
before: function(app, server, compiler){
25-
app.get('/examples/assets/*', (req, res, next)=>{
26-
if(req.originalUrl.match(/lcjs_example_\d*_\w*-/g)){
27-
res.redirect(req.originalUrl.replace(/lcjs_example_\d*_\w*-/g,''))
28-
}
29-
else{
30-
next()
31-
}
32-
})
33-
}
34-
},
35-
resolve: {
36-
modules: [
37-
path.resolve('./src'),
38-
path.resolve('./node_modules')
39-
],
40-
extensions: ['.js']
41-
},
42-
output: {
43-
filename: 'js/[name].[contenthash].bundle.js',
44-
chunkFilename: 'js/[name].[contenthash].bundle.js',
45-
path: outputPath
46-
},
47-
optimization: {
48-
splitChunks: {
49-
chunks: 'all',
50-
cacheGroups: {
51-
// make separate 'vendor' chunk that contains any depenedencies
52-
// allows for smaller file sizes and faster builds
53-
vendor: {
54-
test: /node_modules/,
55-
chunks: 'initial',
56-
name: 'vendor',
57-
priority: 10,
58-
enforce: true
59-
}
60-
}
61-
},
62-
runtimeChunk: 'single'
63-
},
64-
plugins: [
65-
new CleanWebpackPlugin(),
66-
new HtmlWebpackPlugin({
67-
title: "app",
68-
filename: path.resolve(__dirname, 'dist', 'index.html')
69-
}),
70-
new CopyWebpackPlugin({
71-
patterns: [
72-
{ from: './assets/**/*', to: './examples/assets', flatten: true, noErrorOnMissing: true },
73-
{ from: './node_modules/@arction/lcjs/dist/resources', to: 'resources', noErrorOnMissing: true },
74-
]
75-
})
76-
]
77-
}
1+
const HtmlWebpackPlugin = require('html-webpack-plugin')
2+
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
3+
const CopyWebpackPlugin = require('copy-webpack-plugin')
4+
const path = require('path')
5+
6+
const targetFolderName = 'dist'
7+
const outputPath = path.resolve(__dirname, targetFolderName)
8+
const packageJSON = require('./package.json')
9+
10+
11+
module.exports = {
12+
mode: 'development',
13+
entry: {
14+
app: packageJSON.main
15+
},
16+
node: {
17+
buffer: false,
18+
setImmediate: false
19+
},
20+
devServer: {
21+
contentBase: outputPath,
22+
compress: true,
23+
// handle asset renaming
24+
before: function(app, server, compiler){
25+
app.get('/examples/assets/*', (req, res, next)=>{
26+
if(req.originalUrl.match(/lcjs_example_\d*_\w*-/g)){
27+
res.redirect(req.originalUrl.replace(/lcjs_example_\d*_\w*-/g,''))
28+
}
29+
else{
30+
next()
31+
}
32+
})
33+
}
34+
},
35+
resolve: {
36+
modules: [
37+
path.resolve('./src'),
38+
path.resolve('./node_modules')
39+
],
40+
extensions: ['.js']
41+
},
42+
output: {
43+
filename: 'js/[name].[contenthash].bundle.js',
44+
chunkFilename: 'js/[name].[contenthash].bundle.js',
45+
path: outputPath
46+
},
47+
optimization: {
48+
splitChunks: {
49+
chunks: 'all',
50+
cacheGroups: {
51+
// make separate 'vendor' chunk that contains any depenedencies
52+
// allows for smaller file sizes and faster builds
53+
vendor: {
54+
test: /node_modules/,
55+
chunks: 'initial',
56+
name: 'vendor',
57+
priority: 10,
58+
enforce: true
59+
}
60+
}
61+
},
62+
runtimeChunk: 'single'
63+
},
64+
plugins: [
65+
new CleanWebpackPlugin(),
66+
new HtmlWebpackPlugin({
67+
title: "app",
68+
filename: path.resolve(__dirname, 'dist', 'index.html')
69+
}),
70+
new CopyWebpackPlugin({
71+
patterns: [
72+
{ from: './assets/**/*', to: './examples/assets', flatten: true, noErrorOnMissing: true },
73+
{ from: './node_modules/@arction/lcjs/dist/resources', to: 'resources', noErrorOnMissing: true },
74+
]
75+
})
76+
]
77+
}

0 commit comments

Comments
 (0)