Skip to content

Commit

Permalink
Improve demo app
Browse files Browse the repository at this point in the history
  • Loading branch information
@skalinichev
skalinichev committed Mar 31, 2021
1 parent 2a0fad3 commit 987a49d
Show file tree
Hide file tree
Showing 9 changed files with 1,673 additions and 86 deletions.
8 changes: 6 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,9 @@ const Chart = () =>
/>);
```
## Demo
See live demo TODO
To run the demo app locally clone this repository, then execute the following commands inside the project root directory:

`yarn install && yarn run serveReact`

# Vue.js

Expand Down Expand Up @@ -109,7 +111,9 @@ const Chart = Vue.extend({
});
```
## Demo
See live demo TODO
To run the demo app locally clone this repository, then execute the following commands inside the project root directory:

`yarn install && yarn run serveVue`

# Documentation
| Parameter | Requirement | Description |
Expand Down
27 changes: 19 additions & 8 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,46 @@
"Wrapper"
],
"workspaces": {
"packages": ["common", "react", "vue"],
"nohoist": ["**/@types/**"]
"packages": [
"common",
"react",
"vue"
],
"nohoist": [
"**/@types/**"
]
},
"private": true,
"scripts": {
"build": "concurrently 'npm run buildReact' 'npm run buildVue'",
"buildVue": "webpack --env=framework=vue",
"buildReact": "webpack --env=framework=react",
"buildProd": "concurrently 'npm run buildVue -- --env=mode=production' 'npm run buildReact -- --env=mode=production'"
},
"dependencies": {
"buildProd": "concurrently 'npm run buildVue -- --env=mode=production' 'npm run buildReact -- --env=mode=production'",
"serveVue": "webpack serve --env=framework=vue --env=example=true",
"serveReact": "webpack serve --env=framework=react --env=example=true"
},
"dependencies": {},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
"@vue/babel-preset-jsx": "^1.2.4",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/babel-preset-jsx": "^1.2.4",
"babel-loader": "^8.2.2",
"concurrently": "^6.0.0",
"copy-webpack-plugin": "4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^4.3.0",
"eslint": "^7.22.0",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-vue": "^7.7.0",
"eslint-webpack-plugin": "^2.5.2",
"html-webpack-plugin": "^4.5.2",
"style-loader": "^1.3",
"ts-loader": "^8.0.18",
"typescript": "^4.2.3",
"webpack": "^4.46.0",
"webpack-cli": "^4.5.0"
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
7 changes: 0 additions & 7 deletions react/uplot-react-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<link rel="stylesheet" href="./uPlot.min.css">
<script src="./uPlot.iife.min.js"></script>

<script src='./uplot-react-example.js' defer></script>
</head>

<body>
Expand Down
34 changes: 21 additions & 13 deletions react/uplot-react-example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, {useState} from 'react';
import React, {useEffect, useMemo, useState} from 'react';
import ReactDOM, {unstable_batchedUpdates} from 'react-dom';

import uPlot from 'uplot';
import 'uplot/dist/uPlot.min.css';

import UPlotReact from './uplot-react';

Expand All @@ -24,19 +25,19 @@ class ClassApp extends React.Component<
}],
scales: {x: {time: false}}
},
data: [[0, 1, 3, 4, 5], [10, 20, 10, 0, 30]]
data: [new Array(100000).fill(0).map((_, i) => i), new Array(100000).fill(0).map((_, i) => i % 1000)]
};
setInterval(() => {
const rand = Math.round(Math.random() * 10);
const options = {
...this.state.options,
title: 'Rendered with class'
};
const data: uPlot.AlignedData = [...this.state.data];
data[1] = [...data[1]];
data[1][rand % (data[1].length - 1)] = rand * 3;
const data: uPlot.AlignedData = [
[...this.state.data[0], this.state.data[0].length],
[...this.state.data[1], this.state.data[0].length % 1000]
];
this.setState({data, options});
}, 2000);
}, 100);
}
render(): React.ReactNode {
return (<UPlotReact
Expand All @@ -63,21 +64,28 @@ const HooksApp = () => {
}],
scales: {x: {time: false}}
});
const [data, setData] = useState<uPlot.AlignedData>([[0, 1, 3, 4, 5], [10, 20, 10, 0, 30]]);
const initialState = useMemo<uPlot.AlignedData>(() =>
([new Array(100000).fill(0).map((_, i) => i), new Array(100000).fill(0).map((_, i) => i % 1000)])
, []);
const [data, setData] = useState<uPlot.AlignedData>(initialState);
useEffect(() => {

}, []);
setTimeout(() => {
const rand = Math.round(Math.random() * 10);
const newOptions = {
...options,
title: 'Rendered with hooks'
};
const newData: uPlot.AlignedData = [...data];
newData[1] = [...newData[1]];
newData[1][rand % (newData[1].length - 1)] = rand * 3;
const newData: uPlot.AlignedData = [
[...data[0], data[0].length],
[...data[1], data[0].length % 1000]
];

unstable_batchedUpdates(() => {
setData(newData);
setOptions(newOptions);
});
}, 2000);
}, 100);
return (<UPlotReact
key="hooks-key"
options={options}
Expand Down
5 changes: 3 additions & 2 deletions tsconfig.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"baseUrl": ".",
"outDir": "./dist/",
"module": "es2015",
"target": "es5",
"target": "es6",
"esModuleInterop": true,
"sourceMap": true,
"downlevelIteration": true,
Expand All @@ -20,6 +20,7 @@
"skipLibCheck": true,
"paths": {
"uplot-wrappers-common": ["common"]
}
},
"lib": ["es2015", "dom"]
}
}
6 changes: 0 additions & 6 deletions vue/uplot-vue-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<link rel="stylesheet" href="./uPlot.min.css">
<script src="./uPlot.iife.min.js"></script>

<script src='./uplot-vue-example.js' defer></script>
</head>

<body>
Expand Down
19 changes: 13 additions & 6 deletions vue/uplot-vue-example.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Vue, {VNode, CreateElement} from 'vue';

import uPlot from 'uplot';
import 'uplot/dist/uPlot.min.css';

import UplotVue from './uplot-vue';

Expand All @@ -11,6 +12,7 @@ const App = Vue.extend<
>({
name: 'UplotVueExample',
components: {uplotvue: UplotVue},
// @ts-ignore
data() {
return {
options: {
Expand All @@ -25,24 +27,29 @@ const App = Vue.extend<
}],
scales: {x: {time: false}}
},
data: [[0, 1, 3, 4, 5], [10, 20, 10, 0, 30]],
target: null as unknown as HTMLElement
};
},
beforeMount() {
// Initialize data inside mounted hook, to prevent Vue from adding watchers, otherwise performance becomes unbearable
this.data = [new Array(100000).fill(0).map((_, i) => i), new Array(100000).fill(0).map((_, i) => i % 1000)];
},
mounted() {
this.target = this.$refs.root as HTMLElement;
setInterval(() => {
const rand = Math.round(Math.random() * 10);
const options = {
...this.options,
title: (this.$refs.root as HTMLElement).id ? 'Rendered with template' : 'Rendered with function'
};
const data: uPlot.AlignedData = [...this.data];
data[1] = [...data[1]];
data[1][rand % (data[1].length - 1)] = rand * 3;
const data: uPlot.AlignedData = [
[...this.data[0], this.data[0].length],
[...this.data[1], this.data[0].length % 1000]
];
this.data = data;
// Since we disabled reactivity for data above
this.$forceUpdate();
this.options = options;
}, 2000);
}, 100);
},
methods: {
onCreateFromTemplate(/* chart: uPlot */) {
Expand Down
46 changes: 31 additions & 15 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@ const path = require('path');

const CopyPlugin = require('copy-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = env => {
const {framework} = env;
const {framework, example} = env;
const entry = {
[`uplot-${framework}`]: `./${framework}/uplot-${framework}`,
[`uplot-${framework}-example`]: `./${framework}/uplot-${framework}-example`
[`uplot-${framework}`]: `./${framework}/uplot-${framework}`
}

if (example) {
entry[`uplot-${framework}-example`] = `./${framework}/uplot-${framework}-example`;
}
const targets = example ? 'last 1 chrome version' : ['ie 11', 'last 1 chrome version']
return ({
mode: env.mode ? env.mode : 'development',
devtool: 'source-map',
Expand All @@ -32,7 +35,7 @@ module.exports = env => {
use: [
{
loader: 'babel-loader',
options: {presets: ['@babel/preset-react']}
options: {presets: ['@babel/preset-react', ['@babel/preset-env', {targets}]]}
},
{
loader: 'ts-loader',
Expand All @@ -45,31 +48,44 @@ module.exports = env => {
use: [
{
loader: 'babel-loader',
options: {presets: ['@vue/babel-preset-jsx']}
options: {presets: ['@vue/babel-preset-jsx', ['@babel/preset-env', {targets}]]}
},
{
loader: 'ts-loader',
options: {configFile: path.join(__dirname, 'vue', 'tsconfig.json'), context: __dirname}
}
]
},]
}, {
test: /\.css$/,
use: ["style-loader", "css-loader"]
}]
},
plugins: [
new ESLintPlugin({extensions: ['ts', 'tsx']}),
new CopyPlugin([
{from: `${framework}/**/*html`, force: true, flatten: true},
{from: `${framework}/types/**`, force: true, flatten: true},
{from: `${framework}/package.json`, force: true, flatten: true},
{from: 'README.md', force: true, flatten: true},
{from: 'LICENSE', force: true, flatten: true},
{from: "node_modules/uplot/dist/uPlot.iife.min.js", force: true, flatten: true},
{from: "node_modules/uplot/dist/uPlot.min.css", force: true, flatten: true}
])
{from: 'LICENSE', force: true, flatten: true}
]),
new HtmlWebpackPlugin({scriptLoading: 'defer', template: `${framework}/uplot-${framework}-example.html`})
],
resolve: {
extensions: ['.ts', '.tsx', '.js']
extensions: ['.ts', '.tsx', '.js'],
alias: {
vue: 'vue/dist/vue.js'
}
},
externals: {
devServer: {
contentBase: path.join(__dirname, framework, 'dist'),
compress: true,
historyApiFallback: true,
hot: true,
open: true,
overlay: true,
port: 8080
},
externals: example ? {} : {
react: {
amd: 'react',
commonjs: 'react',
Expand All @@ -93,7 +109,7 @@ module.exports = env => {
commonjs: 'vue',
commonjs2: 'vue',
root: 'Vue'
},
}
}
});
}
Loading

0 comments on commit 987a49d

Please sign in to comment.