Bringing Minicharts to dash-leaflet

CHANGELOG.md

@@ -1,6 +1,11 @@
 # Changelog
 
 All notable changes to this project will be documented in this file.
+## [0.1.21] - 2020-17-05
+
+### Added
+
+- Minichart component added.
 
 ## [0.1.20] - 2021-11-07
 
@@ -85,7 +90,7 @@ All notable changes to this project will be documented in this file.
 
 ### Added
 
-- Added [MeasureControl](https://github.com/thedirtyfew/dash-leaflet/pull/50). 
+- Added [MeasureControl](https://github.com/thedirtyfew/dash-leaflet/pull/50).
 
 ## [0.1.5] - 2020-20-10
 

MANIFEST.in

@@ -12,6 +12,8 @@ include dash_leaflet/async-geoTiffOverlay.js
 include dash_leaflet/async-geoTiffOverlay.js.map
 include dash_leaflet/async-measureControl.js
 include dash_leaflet/async-measureControl.js.map
+include dash_leaflet/async-minichart.js
+include dash_leaflet/async-minichart.js.map
 include dash_leaflet/metadata.json
 include dash_leaflet/package-info.json
 include README.md

README.md

@@ -1,4 +1,4 @@
-Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API. 
+Dash Leaflet is a light wrapper around React-Leaflet. The syntax is similar to other Dash components, with naming conventions following the React-Leaflet API.
 
 ## Getting started
 
@@ -19,16 +19,16 @@ app = dash.Dash()
 app.layout = dl.Map(dl.TileLayer(), style={'width': '1000px', 'height': '500px'})
 
 if __name__ == '__main__':
-    app.run_server()    
+    app.run_server()
 ````
 
 If you visit http://127.0.0.1:8050/ in your browser, you should see a Leaflet map.
 
 ## Documentation
 
-The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery. 
+The documentation has been moved to [Heroku](https://dash-leaflet.herokuapp.com/) to enable an interactive example gallery.
 
-NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props).  
+NB: The 0.1.0 release contains a number breaking changes, most prominently merging of the `SuperCluster` and `GeoJSON` components into a new `GeoJSON` component powered by [functional properties](https://dash-leaflet.herokuapp.com/#func_props).
 
 ## Build instructions
 
@@ -49,8 +49,8 @@ pip install -r requirements.txt
 Finally, install packages via npm (ignore errors) and run the build script,
 
 ````
-npm i --ignore-scripts 
-npm run build:all
+npm i --ignore-scripts
+npm run build
 ````
 
 ## Donation

dash_leaflet/__init__.py

@@ -34,8 +34,7 @@
     {
         'relative_package_path': 'dash_leaflet.min.js',
         'dev_package_path': 'dash_leaflet.dev.js',
-
-        'namespace': package_name
+        'namespace': package_name,
     }
 ]
 
@@ -46,6 +45,7 @@
     "GeoTiffOverlay": ["geoTiffOverlay"],
     "LocateControl": ["locateControl"],
     "MeasureControl": ["measureControl"],
+    "Minichart": ["minichart"],
 }
 _chunk_js_dist_map = {}
 for _component in _chunk_map:

package.json

@@ -46,6 +46,7 @@
     "leaflet-polylinedecorator": "^1.6.0",
     "leaflet.locatecontrol": "^0.71.1",
     "leaflet.markercluster": "^1.5.3",
+    "leaflet.minichart": "^0.2.5",
     "lzma": "^2.3.2",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "pbf": "^3.2.1",

src/lib/LeafletMinichart.js

@@ -0,0 +1,46 @@
+import { withLeaflet, MapLayer } from 'react-leaflet';
+
+require("leaflet.minichart");
+
+
+class LeafletMinichart extends MapLayer {
+
+  createLeafletElement(props) {
+    const center = this._parseCenter(props);
+    const options = this._parseOptions(props);
+    return new L.minichart(center, options);
+  }
+
+  updateLeafletElement(fromProps, toProps) {
+    const fromOptions = this._parseOptions(fromProps);
+    const toOptions = this._parseOptions(toProps);
+    if (fromOptions !== toOptions) {
+      this.leafletElement.setOptions(toOptions);
+    }
+  }
+
+  _parseCenter(props) {
+    return [props.lat, props.lon]
+  }
+
+  _parseOptions(props) {
+    return {
+      type: props.type,
+      data: props.data,
+      maxValues: props.maxValues,
+      colors: props.colors,
+      width: props.width,
+      height: props.height,
+      labels: props.labels,
+      labelMinSize: props.labelMinSize,
+      labelMaxSize: props.labelMaxSize,
+      labelPadding: props.labelPadding,
+      labelStyle: props.labelStyle,
+      labelColor: props.labelColor,
+      transitionTime: props.transitionTime,
+    }
+  }
+
+}
+
+export default withLeaflet(LeafletMinichart)

src/lib/components/Minichart.react.js

@@ -0,0 +1,104 @@
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
+
+// eslint-disable-next-line no-inline-comments
+const LazyMinichart = React.lazy(() => import(/* webpackChunkName: "minichart" */ '../fragments/Minichart.react'));
+
+const Minichart = (props) => {
+    return (
+      <div>
+        <Suspense fallback={<div>Loading...</div>}>
+          <LazyMinichart {...props} />
+        </Suspense>
+      </div>
+    );
+  }
+
+Minichart.propTypes = {
+
+    /**
+     * Latitude of the minichart
+     */
+    lat: PropTypes.number.isRequired,
+    /**
+     * Latitude of the minichart
+     */
+    lon: PropTypes.number.isRequired,
+    /**
+     * Type of chart to create.
+     * Possible values are "bar" for barcharts, "pie" for pie charts, "polar-radius" and "polar-area"
+     * for polar area charts where values are represented either by the radius or the area of the slices.
+     */
+    type: PropTypes.string,
+    /**
+     * Data values the chart has to represent.
+     */
+    data: PropTypes.arrayOf(PropTypes.number),
+    /**
+     * Maximal absolute value the data could take.
+     * It can be a single numeric value or an array of values with same length as data.
+     * In the first case, all values will be represented with the same scale while in the second case,
+     * each value will have its own scale. This is useful when one wants to represent multiple variables
+     * that are not comparable. If it equals to "auto" (the default) then the maximum absolute value in data is used.
+     */
+    maxValues: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.arrayOf(PropTypes.number),
+        PropTypes.oneOf(["auto"])
+    ]),
+    /**
+     * Array of colors. If its length is less than the length of data, colors are recycled.
+     */
+    colors: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * Width of the chart when `type` equals 'bar' or maximal diameter of the chart for all other types.
+     */
+    width: PropTypes.number,
+    /**
+     * Maximal height of barcharts.
+     */
+    height: PropTypes.number,
+    /**
+     * Labels to display on the chart. If it equals to "auto" then data values are displayed in a compact way.
+     */
+    labels: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.string),
+        PropTypes.oneOf(["none", "auto"])
+    ]),
+    /**
+     * Labels are automatically hidden if the label height is less than this number.
+     */
+    labelMinSize: PropTypes.number,
+    /**
+     * Maximal height of labels in pixels.
+     */
+    labelMaxSize: PropTypes.number,
+    /**
+     * Padding to apply to labels.
+     */
+    labelPadding: PropTypes.number,
+    /**
+     * CSS style to apply to labels
+     */
+    labelStyle: PropTypes.string,
+    /**
+     * Color to apply to labels. If "auto", text will be black or white depending on the background color.
+     */
+    labelColor: PropTypes.string,
+    /**
+     * Duration in millisecondq of transitions.
+     */
+    transitionTime: PropTypes.number,
+
+    /**
+     * The ID used to identify this component in Dash callbacks
+     */
+    id: PropTypes.string,
+
+    // Events
+    setProps: PropTypes.func,
+
+};
+
+export default Minichart;
+export const propTypes = Minichart.propTypes;

src/lib/fragments/Minichart.react.js

@@ -0,0 +1,16 @@
+import React, { Component } from "react"
+import { propTypes } from '../components/Minichart.react';
+
+import LeafletMinichart from "../LeafletMinichart"
+
+
+/**
+ * Minichart is a wrapper of leaflet.minichart.
+ */
+export default class Minichart extends Component {
+    render() {
+        return <LeafletMinichart {...this.props}/>
+    }
+}
+
+Minichart.propTypes = propTypes;

src/lib/index.js

@@ -12,6 +12,7 @@ import LocateControl from './components/LocateControl.react';
 import Pane from './components/Pane.react';
 import DivMarker from './components/DivMarker.react';
 import PolylineDecorator from './components/PolylineDecorator.react';
+import Minichart from './components/Minichart.react';
 import Marker from './components/Marker.react';
 import Polyline from './components/Polyline.react';
 import Polygon from './components/Polygon.react';
@@ -56,6 +57,7 @@ export {
     GeoJSON,
     ScaleControl,
     PolylineDecorator,
+    Minichart,
     Pane,
     DivMarker,
     MarkerClusterGroup,