ranaalisaeed / d3-webpack-babel-typescript Goto Github PK
View Code? Open in Web Editor NEWBoilerplate code to build D3 on top of webpack, devServer w local csv, babel and finally typescript
Boilerplate code to build D3 on top of webpack, devServer w local csv, babel and finally typescript
Add Production workflow that exports the chart library so that it can be imported as Node library
Implement unit testing workflow using Jest.
My initial notes about Jest implementation from an earlier project:
Tried Jest and everything works! I get all tests passing and get coverage. There is very little setup required for Jest to work as well and there is a lot of things that can be cleaned up from the code.
In terms of config, here are thing to be added:
Here are things that can be removed:
"ali:test": "webpack --config build-utils/webpack.test.js && mocha --require jsdom-global/register test-dist/bundle.test.js && rm -rf test-dist",
all these things can be removedTest failing where we need to get categories from data as getCatories
was not an exposed API function.
API
✕ should provide maxValue getter and setter (22 ms)
✓ should provide an event "on" getter and setter (25 ms)
margin
✓ should provide margin getter and setter (20 ms)
when margins are set partially
✓ should override the default values (26 ms)
● Stackbar Chart › API › should provide maxValue getter and setter
TypeError: stackbarChart.categories is not a function
404 |
405 | test('should provide maxValue getter and setter', () => {
> 406 | const sample_categories = stackbarChart.categories()
| ^
407 | const data_maxVal = max(
408 | sample_data.map(d => max(
409 | [sum(sample_categories.map(k => d[k]))]
at Object.test (src/charts/stackbar.test.ts:406:44)
Between Dev, Demo, Prod workflows, there are repeating parts that need to be made DRY
Implement merge functionality provided by webpack
D3 library has to be imported using:
import * as d3Fetch from 'd3-fetch'
Error:
export 'default' (imported as 'd3Fetch') was not found in 'd3-fetch' (possible exports: blob, buffer, csv, dsv, html, image, json, svg, text, tsv, xml)
what is needed to convert to
import d3Fetch from 'd3-fetch'
Add Demo workflow that shows a demo of the chart library
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.