LCJS 4.0.1

Author: Snekw

.github/workflows/gh-pages-deploy.yml

@@ -2,28 +2,28 @@ name: Webpack build to GitHub Pages
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
+      - uses: actions/checkout@v2
 
-    - name: Use Node.js 16.x
-      uses: actions/setup-node@v1
-      with:
-        node-version: '16.x'
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: "16.x"
 
-    - name: Build
-      run: |
-        npm install
-        npm run build
+      - name: Build
+        run: |
+          npm install
+          npm run build
 
-    - name: Deploy
-      uses: peaceiris/actions-gh-pages@v3
-      with:
-        github_token: ${{ secrets.GITHUB_TOKEN }}
-        publish_dir: ./dist
-        publish_branch: gh-pages
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          publish_branch: gh-pages

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 LightningChart Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,27 @@
 # JavaScript Point Clusters Chart
 
-![JavaScript Point Clusters Chart](pointClusters.png)
+![JavaScript Point Clusters Chart](pointClusters-darkGold.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:
+-   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
+          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.
+-   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 clusters of differently colored points, how to get the boundaries of a series and use them to draw frames around each cluster.
 
-The most efficient way to draw point cloud clusters is utilizing ***PointSeries***. The description of how to configure the visual appearance of points can be found in previous tutorials and more information can be found in API documentation.
+The most efficient way to draw point cloud clusters is utilizing **_PointSeries_**. The description of how to configure the visual appearance of points can be found in previous tutorials and more information can be found in API documentation.
 
 ```javascript
 //  Create point series which represents a single cluster.
@@ -46,7 +46,7 @@ const maxCorner = {
 }
 ```
 
-The boundary rectangle is defined by two points in 2D space. The same methods are applicable to all the series as well as ***progressive series*** in any directions.
+The boundary rectangle is defined by two points in 2D space. The same methods are applicable to all the series as well as **_progressive series_** in any directions.
 
 
 ## API Links
@@ -64,28 +64,28 @@ The boundary rectangle is defined by two points in 2D space. The same methods ar
 
 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.
+Official [API documentation][1] can be found on [LightningChart][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.
+If you think you found a bug in the LightningChart JavaScript library, please contact support@lightningchart.com.
 
-Direct developer email support can be purchased through a [Support Plan][4] or by contacting sales@arction.com.
+Direct developer email support can be purchased through a [Support Plan][4] or by contacting sales@lightningchart.com.
 
 [0]: https://github.com/Arction/
-[1]: https://www.arction.com/lightningchart-js-api-documentation/
-[2]: https://www.arction.com
+[1]: https://lightningchart.com/lightningchart-js-api-documentation/
+[2]: https://lightningchart.com
 [3]: https://stackoverflow.com/questions/tagged/lightningchart
-[4]: https://www.arction.com/support-services/
+[4]: https://lightningchart.com/support-services/
 
-© Arction Ltd 2009-2020. All rights reserved.
+© LightningChart Ltd 2009-2022. All rights reserved.
 
 
-[XY cartesian chart]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/chartxy.html
-[Point series]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/pointseries.html
-[Rectangle series]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/rectangleseries.html
-[Color palettes]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/globals.html#colorpalettes
-[Solid FillStyle]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/solidfill.html
-[Empty FillStyle]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/globals.html#emptyfill
-[Solid LineStyle]: https://www.arction.com/lightningchart-js-api-documentation/v3.4.0/classes/solidline.html
+[XY cartesian chart]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/ChartXY.html
+[Point series]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/PointSeries.html
+[Rectangle series]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/RectangleSeries.html
+[Color palettes]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/variables/ColorPalettes.html
+[Solid FillStyle]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/SolidFill.html
+[Empty FillStyle]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/variables/emptyFill-1.html
+[Solid LineStyle]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/SolidLine.html
 

package.json

@@ -4,7 +4,7 @@
     "build": "webpack --mode production",
     "start": "webpack serve"
   },
-  "license": "Custom",
+  "license": "MIT",
   "private": true,
   "main": "./src/index.js",
   "devDependencies": {
@@ -17,7 +17,7 @@
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {
-    "@arction/lcjs": "^3.4.0",
+    "@arction/lcjs": "^4.0.1",
     "@arction/xydata": "^1.4.0"
   },
   "lightningChart": {

pointClusters-cyberSpace.png

@@ -5,44 +5,28 @@
 const lcjs = require('@arction/lcjs')
 
 // Extract required parts from LightningChartJS.
-const {
-    lightningChart,
-    SolidFill,
-    SolidLine,
-    ColorPalettes,
-    emptyFill,
-    AxisTickStrategies,
-    PointShape,
-    Themes
-} = lcjs
+const { lightningChart, SolidFill, SolidLine, ColorPalettes, emptyFill, AxisTickStrategies, PointShape, Themes } = lcjs
 
 const pointSize = 10
 // Decide on an origin for DateTime axis.
 const dateOrigin = new Date(2018, 8, 1)
 
 // Create a XY Chart.
-const chart = lightningChart().ChartXY({
-    // theme: Themes.darkGold
-})
+const chart = lightningChart()
+    .ChartXY({
+        // theme: Themes.darkGold
+    })
     .setTitle('Salary differences between Kuopio and Helsinki')
     .setPadding({
-        right: 50
+        right: 50,
     })
 
 // Modify the default X Axis to use DateTime TickStrategy, and set the origin for the DateTime Axis.
-chart.getDefaultAxisX()
-    .setTickStrategy(
-        AxisTickStrategies.DateTime,
-        (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)
-    )
+chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin))
 
 // Add a series for each cluster of points
-const fstClusterSeries = chart.addPointSeries({ pointShape: PointShape.Circle })
-    .setName('Kuopio')
-    .setPointSize(pointSize)
-const sndClusterSeries = chart.addPointSeries({ pointShape: PointShape.Triangle })
-    .setName('Helsinki')
-    .setPointSize(pointSize)
+const fstClusterSeries = chart.addPointSeries({ pointShape: PointShape.Circle }).setName('Kuopio').setPointSize(pointSize)
+const sndClusterSeries = chart.addPointSeries({ pointShape: PointShape.Triangle }).setName('Helsinki').setPointSize(pointSize)
 
 // The point supplied to series will have their X values multiplied by this value (for easier addition of DateTime-values).
 const dataFrequency = 1000 * 60 * 60 * 24
@@ -285,7 +269,7 @@ const kuopioPoints = [
     { x: 15.557729941291585, y: 3854.5673076923076 },
     { x: 12.32876712328767, y: 4174.278846153846 },
     { x: 11.859099804305282, y: 4115.384615384615 },
-    { x: 11.330724070450097, y: 3921.875 }
+    { x: 11.330724070450097, y: 3921.875 },
 ]
 
 const helsinkiPoints = [
@@ -523,32 +507,27 @@ const helsinkiPoints = [
     { x: 23.01369863013699, y: 2931.25 },
     { x: 29, y: 2931.25 },
     { x: 29, y: 2931.25 },
-    { x: 29, y: 2931.25 }
+    { x: 29, y: 2931.25 },
 ]
 
 // Create collection of rectangles which are going to be used as frame for clusters
-const rects = chart.addRectangleSeries()
-    .setCursorEnabled(false)
+const rects = chart.addRectangleSeries().setCursorEnabled(false)
 
 // Base style for strokes of frames. Line-FillStyle will be overridden per each cluster.
-const strokeStyle = new SolidLine()
-    .setThickness(2)
+const strokeStyle = new SolidLine().setThickness(2)
 
 // Setup view nicely.
-chart.getDefaultAxisX()
-    .setInterval(0 * dataFrequency, 30 * dataFrequency, true, true)
+chart.getDefaultAxisX().setInterval({ start: 0 * dataFrequency, end: 30 * dataFrequency, animate: true })
 
-chart.getDefaultAxisY()
-    .setTitle('Salary ($)')
-    .setInterval(1500, 6500, true, true)
+chart.getDefaultAxisY().setTitle('Salary ($)').setInterval({ start: 1500, end: 6500, animate: true })
 /**
-* Adds clusters of points to specified series and creates frames for them
-* @param {PointSeries} series Series which should hold the cluster
-* @return Function which receives a cluster of points
-*/
+ * Adds clusters of points to specified series and creates frames for them
+ * @param {PointSeries} series Series which should hold the cluster
+ * @return Function which receives a cluster of points
+ */
 const drawCluster = (series, points) => {
     // Add points to specified series
-    series.add(points.map(point => ({ x: point.x * dataFrequency, y: point.y })))
+    series.add(points.map((point) => ({ x: point.x * dataFrequency, y: point.y })))
     // Cache top left corner of cluster area
     series.setCursorResultTableFormatter((builder, series, Xvalue, Yvalue) => {
         return builder
@@ -561,12 +540,13 @@ const drawCluster = (series, points) => {
         y: series.getYMin(),
     }
     // Create frame around cluster
-    rects.add({
-        x: topLeftCorner.x,
-        y: topLeftCorner.y,
-        width: series.getXMax() - topLeftCorner.x,
-        height: series.getYMax() - topLeftCorner.y
-    })
+    rects
+        .add({
+            x: topLeftCorner.x,
+            y: topLeftCorner.y,
+            width: series.getXMax() - topLeftCorner.x,
+            height: series.getYMax() - topLeftCorner.y,
+        })
         // Disable filling of frame
         .setFillStyle(emptyFill)
         // Configure thickness and color of stroke via strokeStyle
@@ -577,18 +557,17 @@ drawCluster(fstClusterSeries, kuopioPoints)
 drawCluster(sndClusterSeries, helsinkiPoints)
 
 // Enable AutoCursor auto-fill.
-chart.setAutoCursor(cursor => (cursor)
-    .setResultTableAutoTextStyle(true)
-    .setTickMarkerXAutoTextStyle(true)
-    .setTickMarkerYAutoTextStyle(true)
+chart.setAutoCursor((cursor) =>
+    cursor.setResultTableAutoTextStyle(true).setTickMarkerXAutoTextStyle(true).setTickMarkerYAutoTextStyle(true),
 )
 
 // Finally, add LegendBox to chart.
-chart.addLegendBox()
+chart
+    .addLegendBox()
     .add(fstClusterSeries)
     .add(sndClusterSeries)
     // 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.30,
+        maxWidth: 0.3,
     })