Skip to content

Commit

Permalink
v6.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Niilo Keinänen committed Aug 5, 2024
1 parent e603ad5 commit f0a27cc
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 168 deletions.
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,10 +122,10 @@ Direct developer email support can be purchased through a [Support Plan][4] or b
© LightningChart Ltd 2009-2022. All rights reserved.


[Bar Chart]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/BarChart.html
[Bar Chart Bar]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/BarChartBar.html
[Bar Chart Value Axis ]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/BarChartValueAxis.html
[Bar Chart Category Axis]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/classes/BarChartCategoryAxis.html
[Bar Chart Types]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/BarChartTypes.html
[Bar Chart Sorting]: https://lightningchart.com/js-charts/api-documentation/v5.2.0/variables/BarChartSorting.html
[Bar Chart]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/classes/BarChart.html
[Bar Chart Bar]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/classes/BarChartBar.html
[Bar Chart Value Axis ]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/classes/BarChartValueAxis.html
[Bar Chart Category Axis]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/classes/BarChartCategoryAxis.html
[Bar Chart Types]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/variables/BarChartTypes.html
[Bar Chart Sorting]: https://lightningchart.com/js-charts/api-documentation/v6.0.0/variables/BarChartSorting.html

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
"webpack-stream": "^7.0.0"
},
"dependencies": {
"@arction/xydata": "^1.4.0",
"@arction/lcjs": "^5.2.0"
"@lightningchart/lcjs": "^6.0.0",
"@lightningchart/xydata": "^1.4.0"
},
"lightningChart": {
"eID": "1400"
Expand Down
180 changes: 85 additions & 95 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,74 +2,70 @@
* A histogram of a normally distributed data.
*/

const lcjs = require('@arction/lcjs')
const lcjs = require('@lightningchart/lcjs')

const {
lightningChart,
AxisTickStrategies,
BarChartTypes,
BarChartSorting,
Themes
} = lcjs
const { lightningChart, AxisTickStrategies, BarChartTypes, BarChartSorting, Themes } = lcjs

const numberOfBins = 100
const numberOfDataPoints = 50000

// Function for generating normally distributed data
const generateGaussianRandom = (length) => {
const samples = []
for (let i = 0; i < length; i++) {
let u = 0, v = 0, s = 0
while (s === 0 || s >= 1) {
u = Math.random() * 2 - 1
v = Math.random() * 2 - 1
s = u * u + v * v
const samples = []
for (let i = 0; i < length; i++) {
let u = 0,
v = 0,
s = 0
while (s === 0 || s >= 1) {
u = Math.random() * 2 - 1
v = Math.random() * 2 - 1
s = u * u + v * v
}
const temp = Math.sqrt((-2 * Math.log(s)) / s)
const sample = u * temp
samples.push(sample)
}
const temp = Math.sqrt(-2 * Math.log(s) / s)
const sample = u * temp
samples.push(sample)
}
return samples
return samples
}

// Function for calculating the histogram bins from 1D numerical array
const calculateHistogramBins = (data, numberOfBins) => {
const minValue = Math.min(...data)
const maxValue = Math.max(...data)
const binSize = (maxValue - minValue) / numberOfBins

// Calculate bin intervals
const bins = []
for (let i = 0; i < numberOfBins; i++) {
const binStart = minValue + i * binSize
const binEnd = minValue + (i + 1) * binSize
bins.push({
binStart: Math.round(binStart * 100) / 100,
binEnd: Math.round(binEnd * 100) / 100,
values: Array(),
})
}
bins[numberOfBins - 1].binEnd = maxValue

// Map data to bins
data.forEach(value => {
const binIndex = Math.floor((value - minValue) / binSize);
if (binIndex >= 0 && binIndex < numberOfBins) {
bins[binIndex].values.push(value);
const minValue = Math.min(...data)
const maxValue = Math.max(...data)
const binSize = (maxValue - minValue) / numberOfBins

// Calculate bin intervals
const bins = []
for (let i = 0; i < numberOfBins; i++) {
const binStart = minValue + i * binSize
const binEnd = minValue + (i + 1) * binSize
bins.push({
binStart: Math.round(binStart * 100) / 100,
binEnd: Math.round(binEnd * 100) / 100,
values: Array(),
})
}
})

// Create input data for bar chart
const barChartData = []
bins.forEach(interval => {
barChartData.push({
category: `${
(interval.binStart + (interval.binStart === minValue ? 0 : 0.01)).toFixed(2)}${
interval.binEnd < 0 ? `(${interval.binEnd.toFixed(2)})` : interval.binEnd.toFixed(2)}`,
value: interval.values.length
bins[numberOfBins - 1].binEnd = maxValue

// Map data to bins
data.forEach((value) => {
const binIndex = Math.floor((value - minValue) / binSize)
if (binIndex >= 0 && binIndex < numberOfBins) {
bins[binIndex].values.push(value)
}
})

// Create input data for bar chart
const barChartData = []
bins.forEach((interval) => {
barChartData.push({
category: `${(interval.binStart + (interval.binStart === minValue ? 0 : 0.01)).toFixed(2)}${
interval.binEnd < 0 ? `(${interval.binEnd.toFixed(2)})` : interval.binEnd.toFixed(2)
}`,
value: interval.values.length,
})
})
})
return barChartData
return barChartData
}

// Generate the data
Expand All @@ -78,65 +74,59 @@ const histogramData = calculateHistogramBins(values, numberOfBins)

const barChart = lightningChart({
resourcesBaseUrl: new URL(document.head.baseURI).origin + new URL(document.head.baseURI).pathname + 'resources/',
}).BarChart({
theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
type: BarChartTypes.Vertical
})
.setTitle('Histogram')
.setSorting(BarChartSorting.Disabled)
.setValueLabels(undefined)
.setData(histogramData)
.setCursorResultTableFormatter((builder, category, value, bar) => builder
.addRow('Range:', '', category)
.addRow('Amount of values:', '', bar.chart.valueAxis.formatValue(value))
)
})
.BarChart({
theme: Themes[new URLSearchParams(window.location.search).get('theme') || 'darkGold'] || undefined,
type: BarChartTypes.Vertical,
})
.setTitle('Histogram')
.setSorting(BarChartSorting.Disabled)
.setValueLabels(undefined)
.setData(histogramData)

const barDiv = barChart.engine.container

const inputDiv = document.createElement('div')
barDiv.append(inputDiv)
inputDiv.style.position = "absolute"
inputDiv.style.top = "0"

inputDiv.style.position = 'absolute'
inputDiv.style.top = '0'

const label = document.createElement('label')
inputDiv.append(label)
label.innerHTML = "Number of bins:"
label.style.position = "relative"
label.innerHTML = 'Number of bins:'
label.style.position = 'relative'

const binInput = document.createElement('input')
inputDiv.append(binInput)
barChart.setTitleMargin({top: 25, bottom: -10})
binInput.type = "number"
binInput.min = "1"
binInput.max = "1000"
binInput.value = "100"
binInput.style.position = "relative"
binInput.style.height = "30px"
barChart.setTitleMargin({ top: 25, bottom: -10 })
binInput.type = 'number'
binInput.min = '1'
binInput.max = '1000'
binInput.value = '100'
binInput.style.position = 'relative'
binInput.style.height = '30px'

binInput.addEventListener('input', () => {
const inputValue = parseInt(binInput.value)
if (Number.isInteger(inputValue) && inputValue > 0 && inputValue <= 1000) {
barChart.setData([])
const histogramData = calculateHistogramBins(values, inputValue)
barChart.setData(histogramData).setSorting(BarChartSorting.Disabled)
}
const inputValue = parseInt(binInput.value)
if (Number.isInteger(inputValue) && inputValue > 0 && inputValue <= 1000) {
barChart.setData([])
const histogramData = calculateHistogramBins(values, inputValue)
barChart.setData(histogramData).setSorting(BarChartSorting.Disabled)
}
})

// Enable grid lines
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, ticks =>
ticks.setMajorTickStyle(major =>
major.setGridStrokeStyle(
barChart.getTheme().xAxisNumericTicks.majorTickStyle.gridStrokeStyle
)
).setMinorTickStyle(( tickStyle ) =>
tickStyle.setGridStrokeStyle(
barChart.getTheme().yAxisNumericTicks.minorTickStyle.gridStrokeStyle
)
)
barChart.valueAxis.setTickStrategy(AxisTickStrategies.Numeric, (ticks) =>
ticks
.setMajorTickStyle((major) => major.setGridStrokeStyle(barChart.getTheme().xAxisNumericTicks.majorTickStyle.gridStrokeStyle))
.setMinorTickStyle((tickStyle) =>
tickStyle.setGridStrokeStyle(barChart.getTheme().yAxisNumericTicks.minorTickStyle.gridStrokeStyle),
),
)

// Set same color for all bars
const bars = barChart.getBars()
const fillSTyle = bars[0].getFillStyle()
bars.forEach(bar => { bar.setFillStyle(fillSTyle) })
bars.forEach((bar) => {
bar.setFillStyle(fillSTyle)
})
130 changes: 65 additions & 65 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,70 +1,70 @@
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')
const webpack = require('webpack')

const targetFolderName = "dist";
const outputPath = path.resolve(__dirname, targetFolderName);
const packageJSON = require("./package.json");
const targetFolderName = 'dist'
const outputPath = path.resolve(__dirname, targetFolderName)
const packageJSON = require('./package.json')

module.exports = {
mode: "development",
entry: {
app: packageJSON.main,
},
devServer: {
static: outputPath,
compress: true,
},
resolve: {
modules: [path.resolve("./src"), path.resolve("./node_modules")],
extensions: [".js"],
},
output: {
filename: "js/[name].[contenthash].bundle.js",
chunkFilename: "js/[name].[contenthash].bundle.js",
path: outputPath,
},
optimization: {
splitChunks: {
chunks: "all",
cacheGroups: {
// make separate 'vendor' chunk that contains any dependencies
// allows for smaller file sizes and faster builds
vendor: {
test: /[\\/]node_modules[\\/]/,
chunks: "initial",
name: "vendor",
priority: -10,
reuseExistingChunk: true,
},
},
mode: 'development',
entry: {
app: packageJSON.main,
},
runtimeChunk: "single",
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "app",
filename: path.resolve(__dirname, "dist", "index.html"),
}),
new CopyWebpackPlugin({
patterns: [
{
from: "./assets/**/*",
to: `./examples/assets/${packageJSON.lightningChart.eID}/[name][ext]`,
noErrorOnMissing: true,
},
{
from: "./node_modules/@arction/lcjs/dist/resources",
to: "resources",
noErrorOnMissing: true,
devServer: {
static: outputPath,
compress: true,
},
resolve: {
modules: [path.resolve('./src'), path.resolve('./node_modules')],
extensions: ['.js'],
},
output: {
filename: 'js/[name].[contenthash].bundle.js',
chunkFilename: 'js/[name].[contenthash].bundle.js',
path: outputPath,
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
// make separate 'vendor' chunk that contains any dependencies
// allows for smaller file sizes and faster builds
vendor: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendor',
priority: -10,
reuseExistingChunk: true,
},
},
},
],
}),
new webpack.DefinePlugin({
LCJS_LICENSE: "'" + process.env.LCJS_LICENSE + "'",
}),
],
};
runtimeChunk: 'single',
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'app',
filename: path.resolve(__dirname, 'dist', 'index.html'),
}),
new CopyWebpackPlugin({
patterns: [
{
from: './assets/**/*',
to: `./examples/assets/${packageJSON.lightningChart.eID}/[name][ext]`,
noErrorOnMissing: true,
},
{
from: './node_modules/@lightningchart/lcjs/dist/resources',
to: 'resources',
noErrorOnMissing: true,
},
],
}),
new webpack.DefinePlugin({
LCJS_LICENSE: "'" + process.env.LCJS_LICENSE + "'",
}),
],
}

0 comments on commit f0a27cc

Please sign in to comment.