deltares / fews-web-oc-charts Goto Github PK
View Code? Open in Web Editor NEWDelft-FEWS Web OC Chart component
License: MIT License
Delft-FEWS Web OC Chart component
License: MIT License
See https://github.com/Deltares/fews-wms-requests/blob/main/.github/workflows/npm-test.yml for similar action.
Adjust crossSectionSelect.ts
such that it works for a chart with an array of data, such as a chartArea
. For a chartArea
, draw two circles, one at each end of the area, but only one tag with data. Other chart
types might also have an array as data, but might require a different approach
When the axis is of type degree it should be capped at 360. It currently scales to 400.
https://rwsos.rws.nl/viewer/map/noordzee/meteo/location/L91?pd=-2%3B2
If valueField
is an array, and not all of the selectors have (non-null) data, the datafield should still display correctly. For instance:
hyphen
if the next valueField
will show anything (i.e. if the next valueField
can find data).dx
and dy
of each valueField
to the individual tspan
Maybe other things should be adjusted as well.
When the x-axis is a non time type (e.g. value) then the tooltip shows an invalid datetime text.
d3.bisect only accepts ascending arrays, fix it by doing it in reverse for descending ones.
See #79
All the visitors should have a zoom method which has a start point and end point as argument.
zoom(start, end)
Make compatible for use within the RWsOS viewer.
Application: Make a rose for current as well as for wind. However, the direction of current is opposite that of wind (both have the same value, but the 'arrow points in the opposite direction')
Change the line in the polar plot to an arrow/vector, or add something like a chartVector
instead of chartLine
dark
and light
classesIn some cases default are set with ||
where it would be better to ??
.
Check and use ??
.
When the axis options are changed (using setOptions
), the Axis is not updated. For instance, of the axis position is set to 'top' initially, but changed to 'bottom' later, then the axis stays at the 'top' position. The setOptions
correctly updates this.options
, but the Axis / Chart is not updated.
When adding new data to a chart it is not always appropriate to animate the transition from new to old data.
Hence, we should add an option to disable the transition on a redraw.
toggleChartVisisbility => toggleChartVisibility
Hide the data point circle of the mouseOver:
Move the axis to a translated group and add the legend on top, bottom, left or right.
Create an svg group for all axis (not grid lines). Can have an influence on the css selectors.
D3 available color scales:
determineLabel
is used in both crossSectionSelect.ts
and mouseOver.ts
, and is (nearly) identical. In addition, the label depends more on the type of chart
than on the type of visitor
. So move determineLabel
to (each) chart
. See also #43 (comment) for background.
npm crashes when running npm i
because the project is using a deprecated version
When the axis is located a the top of the chart the label and unit should be moved.
You can add charts with the same id. They are grouped in the legend.
Sometime this is done for combining a chartMarker and chartLine which have the same data.
Now two labels are drawn.
ERROR in ./node_modules/@deltares/fews-web-oc-charts/lib/esm/Axis/axis.js 48:26-37
export 'default' (imported as 'd3') was not found in 'd3'
Add a serve.json
file with CSP headers.
Inline script and style are not allowed. Separate examples in *.html
, *.js
and *.css
files.
At the moment we need CSP header due to the tooltip rendering html from string.
Content-Security-Policy: style-src 'unsafe-inline';
When a chart is closed, such that the path
is no longer present, calling resize()
on the axis gives an Error: transition xx not found
for some charts. This does not happen for ChartLine
, but does happen for (at least) ChartRange
and ChartHistogram
.
See https://github.com/Deltares/fews-wms-requests/blob/main/.github/workflows/npm-publish.yml for similar action.
Move the repos from the Vortech Gitlab https://gitlab.vortech.nl/deltares/wb-charts to here.
Change the name in package.json
to "@deltares/fews-web-oc-charts".
Migrate issues if possbile.
When making an transition where rescaling is necessary it is better to use a transition from the old pixel coordinates to the new coordinates. This prevents strange animations outside the axis range.
Add option to mouseOver to pass an custom formatter.
See Deltares/fews-pi-requests#69 for more details how to add Ecmascript as build output and enable ES support in Jest.
The following steps are necessary.
type=module
in package.json
, this will ensure the node treats als Javascript files as Ecmascript.esltintrc.js
to .eslintrc.cjs
to ensure the node will treat it as Common JS (with require
)build:esm
step in package.json
to generate Ecmascript module "build:esm": "tsc"
, change the "tsconfig.json"
file to output types to "declarationDir": "lib/types"
, and output "outDir": "lib/esm"
webpack.js
to Ecmascript module (replace requre
with import
), change the entry for webpack to entry: './lib/esm/index.js'
, the ts-loader
plugin is no longer requiredpackage.json
include the lib
directory in the "files" : [ "dist/*", "lib/*" ]
entry.build:cjs
step in package.json
to generate Commonjs to "lib/esm"
"build:cjs": "tsc --module commonjs --outDir lib/cjs"
import
s to full path, (see below)jest.config.js
to jest.config.cjs
and enable Ecmascript support for testing preset: 'ts-jest/presets/default-esm', // or other ESM presets
moduleNameMapper: {
'^(\\.{1,2}/.*)\\.js$': '$1',
},
transform: {
'^.+\\.[tj]sx?$': ['ts-jest', { useESM: true } ]
},
For Ecmascript it is required the all import
s are specified as a full path.
So the import
import { TooltipAnchor, TooltipPosition } from '../Tooltip';
must be changed to
import { TooltipAnchor, TooltipPosition } from '../Tooltip/tooltip.js';
For the index.ts
files change
export * from './axis'
to
export * from './axis.js
Even when working with Typescript the import
statement should specify the .js
extension.
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.