Skip to content

Commit 2f8ccdd

Browse files
klishevichklishevich
committed
merge master to 2x
2 parents f87a0bd + 578757b commit 2f8ccdd

File tree

13 files changed

+278
-4
lines changed

13 files changed

+278
-4
lines changed

‎.github/workflows/master_SciChartJSExamples.yml

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
2+
# More GitHub Actions for Azure: https://github.com/Azure/actions
3+
4+
name: Build and deploy Node.js app to Azure Web App - SciChartJSExamples
5+
6+
on:
7+
push:
8+
branches:
9+
- master
10+
workflow_dispatch:
11+
12+
jobs:
13+
build:
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- uses: actions/checkout@v2
18+
19+
- name: Set up Node.js version
20+
uses: actions/setup-node@v1
21+
with:
22+
node-version: '12.x'
23+
24+
- name: npm install, build, and test
25+
run: |
26+
npm install
27+
npm run build --if-present
28+
npm run test --if-present
29+
30+
- name: Upload artifact for deployment job
31+
uses: actions/upload-artifact@v2
32+
with:
33+
name: node-app
34+
path: .
35+
36+
deploy:
37+
runs-on: ubuntu-latest
38+
needs: build
39+
environment:
40+
name: 'production'
41+
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
42+
43+
steps:
44+
- name: Download artifact from build job
45+
uses: actions/download-artifact@v2
46+
with:
47+
name: node-app
48+
49+
- name: 'Deploy to Azure Web App'
50+
id: deploy-to-webapp
51+
uses: azure/webapps-deploy@v2
52+
with:
53+
app-name: 'SciChartJSExamples'
54+
slot-name: 'production'
55+
publish-profile: ${{ secrets.AzureAppService_PublishProfile_952f7ff99977421db08958b42acad718 }}
56+
package: .

‎Examples/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"author": "",
2424
"license": "ISC",
2525
"dependencies": {
26-
"@material-ui/core": "^4.11.0",
26+
"@material-ui/core": "^4.12.3",
2727
"@material-ui/icons": "^4.9.1",
2828
"@material-ui/lab": "^4.0.0-alpha.56",
2929
"chalk": "^4.1.0",

‎Examples/src/components/Examples/BuilderApi/ChartFromJSON/exampleInfo.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,11 @@ const documentationLinks: TDocumentationLink[] = [
3838
href: ExampleStrings.urlBuilderApiDocumentation,
3939
title: ExampleStrings.urlTitleBuilderApiDocumentation,
4040
linkTitle: "JavaScript Builder API Documentation"
41+
},
42+
{
43+
href: ExampleStrings.urlDefinitionDocumentation,
44+
title: ExampleStrings.urlTitleDefinitionDocumentation,
45+
linkTitle: "ISciChart2DDefinition Documentation"
4146
}
4247
];
4348

‎Examples/src/components/Examples/ExampleStrings.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -553,6 +553,8 @@ urlTitleSplineMountainChartDocumentation:
553553
urlTitleBuilderApiDocumentation:
554554
"This specific page in the JavaScript Builder API documentation will help you to get started",
555555
imgChartFromJSON: "images/javascript-chart-from-json.jpg",
556+
urlDefinitionDocumentation: "https://www.scichart.com/documentation/js/current/typedoc/interfaces/iscichart2ddefinition.html",
557+
urlTitleDefinitionDocumentation: "Full details of the definition object",
556558

557559
// BuilderApi, Custom Types
558560
urlCustomTypes: "/javascript-custom-types",

‎Sandbox/CustomerExamples/AsyncDataLoad/src/index.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
22
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
33
import { FastLineRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries';
44
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
5+
import { TextAnnotation } from 'scichart/Charting/Visuals/Annotations/TextAnnotation';
6+
import { ECoordinateMode } from 'scichart/Charting/Visuals/Annotations/AnnotationBase';
57

68
type DataResult = {
79
xValues: number[];
@@ -55,6 +57,17 @@ async function initSciChart() {
5557
});
5658
sciChartSurface.renderableSeries.add(lineSeries);
5759
});
60+
61+
return sciChartSurface;
62+
63+
64+
}
65+
66+
async function drawExample() {
67+
const surface = await initSciChart();
68+
const resp = await fetch("/api/getdata");
69+
const data = await resp.text();
70+
surface.annotations.add(new TextAnnotation({ text: data, x1: 0, y1:0.5, yCoordinateMode: ECoordinateMode.Relative }));
5871
}
5972

60-
initSciChart();
73+
drawExample();

‎Sandbox/CustomerExamples/AsyncDataLoad/webpack.dev.config.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@ module.exports = merge(webpackConfig, {
55
mode: "development",
66
devtool: "inline-source-map",
77
devServer: {
8-
disableHostCheck: true
8+
disableHostCheck: true,
9+
before: function(app, server, compiler) {
10+
app.get("/api/getdata", function(req, res) {
11+
res.send("This came from the server");
12+
});
13+
}
914
}
1015
});

‎Sandbox/CustomerExamples/CustomFilterIHS/Readme.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Inverse Hyperbolic Sine transform by Custom Filter
2+
3+
The Inverse Hyperbolic Sine is an approximation to the natural logarithm, which is well behaved at zero. It is often used in economics for analysing data based on nominal wealth, which can be very large, but also zero or even negative. See https://www.themsp.org/2017/10/01/visualizing-racial-wealth-gaps/ for an example.
4+
5+
Here we use a simple custom filter to apply the IHS transformation, rather than use a log axis.
6+
7+
## Running the Example
8+
9+
To run the tutorial, open this folder in VSCode, and run the following commands:
10+
11+
* `npm install`
12+
* `npm start`
13+
14+
Then visit https://localhost:8080 in your web browser!
15+
16+
17+
## How it works
18+
19+
```typescript
20+
const ihsFilter = new XyCustomFilter(dataSeries, { filterFunction: ((i, y) => Math.log(y + Math.sqrt(1 + y*y))) });
21+
```

‎Sandbox/CustomerExamples/CustomFilterIHS/package.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "logarithmic-axis",
3+
"version": "1.0.0",
4+
"description": "Logarithmic axis demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build": "webpack",
8+
"start": "webpack-dev-server"
9+
},
10+
"author": "",
11+
"license": "MIT",
12+
"dependencies": {
13+
"scichart": "^2.0.0-beta.2084"
14+
},
15+
"devDependencies": {
16+
"copy-webpack-plugin": "^6.0.3",
17+
"prettier": "^2.3.2",
18+
"ts-loader": "^6.2.1",
19+
"webpack": "^4.44.1",
20+
"webpack-cli": "^3.3.12",
21+
"webpack-dev-server": "^3.11.0"
22+
}
23+
}

‎Sandbox/CustomerExamples/CustomFilterIHS/src/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<html lang="en-us">
2+
<head>
3+
<meta charset="utf-8" />
4+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
5+
<title>IHS Custom Filter demo</title>
6+
<script async type="text/javascript" src="bundle.js"></script>
7+
<style>
8+
body {
9+
font-family: "Arial";
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<h1>IHS Custom Filter demo</h1>
15+
<div>The Inverse Hyperbolic Sine is an approximation to the natural logarithm, which is well behaved at zero.
16+
It is often used in economics for analysing data based on nominal wealth, which can be very large, but also zero or even negative.
17+
See <a href="https://www.themsp.org/2017/10/01/visualizing-racial-wealth-gaps/">https://www.themsp.org/2017/10/01/visualizing-racial-wealth-gaps/</a> for an example.</div>
18+
<div>Here we use a simple custom filter to apply the IHS transformation.</div>
19+
<h2>Original Data</h2>
20+
<!-- the Div where the SciChartSurface will reside -->
21+
<div id="scichart-root" style="width: 600px; height: 400px"></div>
22+
<h2>Transformed Data</h2>
23+
<div id="scichart-root2" style="width: 600px; height: 400px"></div>
24+
</body>
25+
</html>

‎Sandbox/CustomerExamples/CustomFilterIHS/src/index.ts

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
2+
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
3+
import { FastLineRenderableSeries } from 'scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries';
4+
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
5+
import { NumberRange } from 'scichart/Core/NumberRange';
6+
import { ZoomPanModifier } from 'scichart/Charting/ChartModifiers/ZoomPanModifier';
7+
import { MouseWheelZoomModifier } from 'scichart/Charting/ChartModifiers/MouseWheelZoomModifier';
8+
import { ZoomExtentsModifier } from 'scichart/Charting/ChartModifiers/ZoomExtentsModifier';
9+
import { XyCustomFilter } from 'scichart/Charting/Model/Filters/XyCustomFilter';
10+
import { RolloverModifier } from 'scichart/Charting/ChartModifiers/RolloverModifier';
11+
import { CursorModifier } from 'scichart/Charting/ChartModifiers/CursorModifier';
12+
13+
async function initSciChart() {
14+
// Create the SciChartSurface in the div 'scichart-root'
15+
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
16+
// instance must be passed to other types that exist on the same surface.
17+
const { sciChartSurface, wasmContext } = await SciChartSurface.create('scichart-root');
18+
// Create an X,Y Axis and add to the chart
19+
sciChartSurface.xAxes.add(new NumericAxis(wasmContext, { visibleRange: new NumberRange(0,100), labelPrecision: 0, axisTitle: "Percentile" }));
20+
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1), labelPrecision: 0, axisTitle:"Wealth" }));
21+
22+
const dataSeries = new XyDataSeries(wasmContext);
23+
// Generate data that approximates real world wealth distribution
24+
let y = -1000;
25+
for (let x = 1; x <= 100; x++) {
26+
if (x < 10) {
27+
y = y / 2;
28+
} else if (x < 80) {
29+
y = y + 1;
30+
} else {
31+
y = y*1.4;
32+
}
33+
dataSeries.append(x,y);
34+
}
35+
const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
36+
stroke: 'white',
37+
dataSeries
38+
});
39+
sciChartSurface.renderableSeries.add(lineSeries1);
40+
sciChartSurface.chartModifiers.add(new CursorModifier());
41+
42+
// Create Transformed chart
43+
const { sciChartSurface: sciChartSurface2, wasmContext: wasmContext2 } = await SciChartSurface.create('scichart-root2');
44+
sciChartSurface2.xAxes.add(new NumericAxis(wasmContext2, { visibleRange: new NumberRange(0,100), labelPrecision: 0, axisTitle: "Percentile" }));
45+
sciChartSurface2.yAxes.add(new NumericAxis(wasmContext, { growBy: new NumberRange(0.1, 0.1), axisTitle:"Transformed Wealth" }));
46+
47+
// Inverse hyperbolic sine filter
48+
const ihsFilter = new XyCustomFilter(dataSeries, { filterFunction: ((i, y) => Math.log(y + Math.sqrt(1 + y*y))) });
49+
50+
const lineSeriesTransformed = new FastLineRenderableSeries(wasmContext, {
51+
stroke: 'white',
52+
dataSeries: ihsFilter
53+
});
54+
sciChartSurface2.renderableSeries.add(lineSeriesTransformed);
55+
sciChartSurface2.chartModifiers.add(new CursorModifier());
56+
}
57+
58+
initSciChart();

0 commit comments

Comments
 (0)