Update LCJS version

Author: Snekw

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+package-lock.json

README.md

@@ -1,2 +1,76 @@
-# lcjs-example-0805-spectrogramProjection
+# JavaScript Spectrogram XY-Projection Chart
+
+![JavaScript Spectrogram XY-Projection Chart](spectrogramProjection.png)
+
+This demo application belongs to the set of examples for LightningChart JS, data visualization library for JavaScript.
+
+LightningChart JS is entirely GPU accelerated and performance optimized charting library for presenting massive amounts of data. It offers an easy way of creating sophisticated and interactive charts and adding them to your website or web application.
+
+The demo can be used as an example or a seed project. Local execution requires the following steps:
+
+- Make sure that relevant version of [Node.js](https://nodejs.org/en/download/) is installed
+- Open the project folder in a terminal:
+
+  npm install # fetches dependencies
+  npm start # builds an application and starts the development server
+
+- The application is available at *http://localhost:8080* in your browser, webpack-dev-server provides hot reload functionality.
+
+
+## Description
+
+This example shows how to create a 2D spectrogram chart with X and Y line projections over last mouse coordinate (custom interaction).
+
+Every time the user moves mouse over the spectrogram 1024 + 1024 data points are picked from the data set and pushed to X and Y projections line series - this is an expensive operation, but handled really fast with calls to `LineSeries.clear().add(data)`.
+
+The spectrogram chart contains 1024 x 1024 = ~1 million data points.
+
+
+## API Links
+
+* [Dashboard]
+* [XY cartesian chart]
+* [Heatmap Grid Series Intensity]
+* [Line Series]
+* [Axis scroll strategies]
+* [Paletted Fill]
+* [LUT]
+* [Empty line style]
+* [Legend Box]
+* [Legend Box builders]
+* [Translate point]
+
+
+## Support
+
+If you notice an error in the example code, please open an issue on [GitHub][0] repository of the entire example.
+
+Official [API documentation][1] can be found on [Arction][2] website.
+
+If the docs and other materials do not solve your problem as well as implementation help is needed, ask on [StackOverflow][3] (tagged lightningchart).
+
+If you think you found a bug in the LightningChart JavaScript library, please contact support@arction.com.
+
+Direct developer email support can be purchased through a [Support Plan][4] or by contacting sales@arction.com.
+
+[0]: https://github.com/Arction/
+[1]: https://www.arction.com/lightningchart-js-api-documentation/
+[2]: https://www.arction.com
+[3]: https://stackoverflow.com/questions/tagged/lightningchart
+[4]: https://www.arction.com/support-services/
+
+© Arction Ltd 2009-2020. All rights reserved.
+
+
+[Dashboard]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/dashboard.html
+[XY cartesian chart]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/chartxy.html
+[Heatmap Grid Series Intensity]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/
+[Line Series]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/lineseries.html
+[Axis scroll strategies]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/globals.html#axisscrollstrategies
+[Paletted Fill]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/palettedfill.html
+[LUT]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/lut.html
+[Empty line style]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/globals.html#emptyline
+[Legend Box]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/classes/chartxy.html#addlegendbox
+[Legend Box builders]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/globals.html#legendboxbuilders
+[Translate point]: https://www.arction.com/lightningchart-js-api-documentation/v3.1.0/globals.html#translatepoint
 

package.json

@@ -0,0 +1,23 @@
+{
+ "version": "1.0.1",
+ "scripts": {
+ "build": "webpack --mode production",
+ "start": "webpack-dev-server"
+ },
+ "license": "Custom",
+ "private": true,
+ "main": "./src/index.js",
+ "devDependencies": {
+ "copy-webpack-plugin": "^6.0.2",
+ "html-webpack-plugin": "^3.2.0",
+ "webpack-cli": "^3.3.10",
+ "webpack-dev-server": "^3.9.0"
+ },
+ "dependencies": {
+ "@arction/lcjs": "^3.1.0",
+ "@arction/xydata": "^1.4.0",
+ "clean-webpack-plugin": "^3.0.0",
+ "webpack": "^4.41.2",
+ "webpack-stream": "^5.2.1"
+ }
+}

spectrogramProjection.png

@@ -0,0 +1,201 @@
+/*
+ * LightningChartJS example for Chart with 2D spectrogram + dynamic projections on mouse interaction.
+ */
+// Import LightningChartJS
+const lcjs = require("@arction/lcjs");
+
+// Extract required parts from LightningChartJS.
+const {
+ lightningChart,
+ PalettedFill,
+ LUT,
+ emptyFill,
+ emptyLine,
+ AxisScrollStrategies,
+ LegendBoxBuilders,
+ ColorHSV,
+ translatePoint,
+ Themes,
+} = lcjs;
+
+const { createSpectrumDataGenerator } = require("@arction/xydata");
+
+const spectrogramColumns = 1024;
+const spectrogramRows = 1024;
+
+// Create charts and series.
+
+const dashboard = lightningChart()
+ .Dashboard({
+ // theme: Themes.darkGold,
+ numberOfColumns: 2,
+ numberOfRows: 2,
+ disableAnimations: true,
+ })
+ .setColumnWidth(0, 1)
+ .setColumnWidth(1, 0.2)
+ .setRowHeight(0, 1)
+ .setRowHeight(1, 0.3);
+
+const chartSpectrogram = dashboard
+ .createChartXY({
+ columnIndex: 0,
+ rowIndex: 0,
+ })
+ .setTitle("2D Spectrogram with X & Y projection on mouse hover");
+
+const seriesSpectrogram = chartSpectrogram
+ .addHeatmapGridSeries({
+ columns: spectrogramColumns,
+ rows: spectrogramRows,
+ })
+ .setMouseInteractions(false)
+ .setWireframeStyle(emptyLine)
+ .setFillStyle(
+ new PalettedFill({
+ lookUpProperty: "value",
+ lut: new LUT({
+ interpolate: true,
+ steps: [
+ { value: 0, label: "0.0", color: ColorHSV(0, 1, 0) },
+ { value: 0.2, label: "0.2", color: ColorHSV(270, 0.84, 0.2) },
+ { value: 0.4, label: "0.4", color: ColorHSV(289, 0.86, 0.35) },
+ { value: 0.6, label: "0.6", color: ColorHSV(324, 0.97, 0.56) },
+ { value: 0.8, label: "0.8", color: ColorHSV(1, 1, 1) },
+ { value: 1.0, label: "1.0", color: ColorHSV(44, 0.64, 1) },
+ ],
+ }),
+ })
+ );
+
+const legend = chartSpectrogram
+ .addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
+ // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
+ .setAutoDispose({
+ type: 'max-width',
+ maxWidth: 0.80,
+ })
+ .add(chartSpectrogram);
+
+const chartProjectionY = dashboard
+ .createChartXY({
+ columnIndex: 1,
+ rowIndex: 0,
+ })
+ .setTitleFillStyle(emptyFill)
+ // NOTE: Hardcoded alignment with Spectrogram chart.
+ .setPadding({ top: 44 })
+ .setMouseInteractions(false);
+
+chartProjectionY
+ .getDefaultAxisY()
+ .setScrollStrategy(undefined)
+ .setMouseInteractions(false);
+// Sync projection Axis with spectogram chart projected axis.
+chartSpectrogram
+ .getDefaultAxisY()
+ .onScaleChange((start, end) =>
+ chartProjectionY.getDefaultAxisY().setInterval(start, end, false, true)
+ );
+chartProjectionY
+ .getDefaultAxisX()
+ .setScrollStrategy(AxisScrollStrategies.expansion)
+ .setInterval(0, 1)
+ .setMouseInteractions(false);
+
+const seriesProjectionY = chartProjectionY
+ .addLineSeries({
+ dataPattern: {
+ pattern: "ProgressiveY",
+ regularProgressiveStep: true,
+ },
+ })
+ .setName("Projection (Y)")
+ .setCursorSolveBasis("nearest-y");
+
+const chartProjectionX = dashboard
+ .createChartXY({
+ columnIndex: 0,
+ rowIndex: 1,
+ })
+ .setTitleFillStyle(emptyFill)
+ .setMouseInteractions(false);
+chartProjectionX
+ .getDefaultAxisX()
+ .setScrollStrategy(undefined)
+ .setMouseInteractions(false);
+// Sync projection Axis with spectogram chart projected axis.
+chartSpectrogram
+ .getDefaultAxisX()
+ .onScaleChange((start, end) =>
+ chartProjectionX.getDefaultAxisX().setInterval(start, end, false, true)
+ );
+chartProjectionX
+ .getDefaultAxisY()
+ .setScrollStrategy(AxisScrollStrategies.expansion)
+ .setInterval(0, 1)
+ .setMouseInteractions(false);
+const seriesProjectionX = chartProjectionX
+ .addLineSeries({
+ dataPattern: {
+ pattern: "ProgressiveX",
+ regularProgressiveStep: true,
+ },
+ })
+ .setName("Projection (X)");
+
+// Generate data.
+createSpectrumDataGenerator()
+ .setNumberOfSamples(spectrogramColumns)
+ .setSampleSize(spectrogramRows)
+ .generate()
+ .toPromise()
+ .then((data) => {
+ seriesSpectrogram.invalidateIntensityValues(data);
+
+ console.log(seriesSpectrogram);
+ // Add custom interaction when mouse is hovered over spectrogram chart.
+ chartSpectrogram.onSeriesBackgroundMouseMove((_, event) => {
+ // Solve mouse location on Axis.
+ const locationAxis = translatePoint(
+ chartSpectrogram.engine.clientLocation2Engine(
+ event.clientX,
+ event.clientY
+ ),
+ chartSpectrogram.engine.scale,
+ seriesSpectrogram.scale
+ );
+
+ // Calculate spectrogram 1D projections at axis location for both X and Y planes.
+ let projectionY;
+ try {
+ projectionY = data[Math.round(locationAxis.x)].map((value, i) => ({
+ x: value,
+ y: i,
+ }));
+ } catch (e) {}
+
+ let projectionX;
+ try {
+ projectionX = [];
+ const row = Math.round(locationAxis.y);
+ for (let x = 0; x < spectrogramColumns; x += 1) {
+ projectionX[x] = {
+ x,
+ y: data[x][row],
+ };
+ }
+ } catch (e) {}
+
+ // Update projection series data.
+ seriesProjectionY.clear();
+ if (projectionY) {
+ seriesProjectionY.add(projectionY);
+ }
+
+ seriesProjectionX.clear();
+ if (projectionX) {
+ seriesProjectionX.add(projectionX);
+ }
+ });
+ });

src/index.js

@@ -0,0 +1,77 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const path = require('path')
+
+const targetFolderName = 'dist'
+const outputPath = path.resolve(__dirname, targetFolderName)
+const packageJSON = require('./package.json')
+
+
+module.exports = {
+ mode: 'development',
+ entry: {
+ app: packageJSON.main
+ },
+ node: {
+ buffer: false,
+ setImmediate: false
+ },
+ devServer: {
+ contentBase: outputPath,
+ compress: true,
+ // handle asset renaming
+ before: function(app, server, compiler){
+ app.get('/examples/assets/*', (req, res, next)=>{
+ if(req.originalUrl.match(/lcjs_example_\d*_\w*-/g)){
+ res.redirect(req.originalUrl.replace(/lcjs_example_\d*_\w*-/g,''))
+ }
+ else{
+ next()
+ }
+ })
+ }
+ },
+ 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 depenedencies
+ // allows for smaller file sizes and faster builds
+ vendor: {
+ test: /node_modules/,
+ chunks: 'initial',
+ name: 'vendor',
+ priority: 10,
+ enforce: true
+ }
+ }
+ },
+ runtimeChunk: 'single'
+ },
+ plugins: [
+ new CleanWebpackPlugin(),
+ new HtmlWebpackPlugin({
+ title: "app",
+ filename: path.resolve(__dirname, 'dist', 'index.html')
+ }),
+ new CopyWebpackPlugin({
+ patterns: [
+ { from: './assets/**/*', to: './examples/assets', flatten: true, noErrorOnMissing: true },
+ { from: './node_modules/@arction/lcjs/dist/resources', to: 'resources', noErrorOnMissing: true },
+ ]
+ })
+ ]
+}