Fix PieChart component

pikhovkin · Dec 3, 2018 · 909a8ff · 909a8ff
1 parent 8ff68ec
commit 909a8ff
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 30 deletions.
diff --git a/advanced_usage.py b/advanced_usage.py
@@ -34,6 +34,19 @@
     {'language': 'Polish', 'percent': 1.8}
 ]
 
+pieExportImportDataSource = [
+    {'Country': 'Brazil', 'Export': 243, 'Import': 233},
+    {'Country': 'Russia', 'Export': 529, 'Import': 335},
+    {'Country': 'India','Export': 293,'Import': 489},
+    {'Country': 'China', 'Export': 2049, 'Import': 1818},
+    {'Country': 'Japan', 'Export': 799, 'Import': 886},
+    {'Country': 'USA', 'Export': 1547, 'Import': 2335},
+    {'Country': 'Canada', 'Export': 455, 'Import': 475},
+    {'Country': 'France', 'Export': 569, 'Import': 674},
+    {'Country': 'England', 'Export': 468, 'Import': 680},
+    {'Country': 'Germany', 'Export': 1407, 'Import': 1167}
+]
+
 _default_index = '''<!DOCTYPE html>
 <html>
     <head>
@@ -84,13 +97,17 @@
                 }
                 
                 function pie_chart(point) {
-                    return `${point.argumentText}: ${point.valueText}%`;
+                    return `${point.argumentText}: ${point.valueText}`;
+                }
+                
+                function doughnut_chart(point) {
+                    return `${point.argumentText} (${point.seriesName}): ${point.valueText}B (${point.percentText})`;
                 }
             </script>
         </footer>
     </body>
 </html>'''
-#
+
 
 app = dash.Dash(__name__, index_string=_default_index)
 app.scripts.config.serve_locally = True
@@ -107,12 +124,12 @@
     ddx.DataGrid(dataSource=data, columns=columns_table),
     ddx.TabPanel(items=data, itemTitleTemplate='tp_title', itemTemplate='tp_panel'),
     ddx.PieChart(
-        type='doughnut',
+        type='pie',
         palette='Soft Pastel',
         title='Top Internet Languages',
         dataSource=pieDataSource,
         legend=dict(horizontalAlignment='center', verticalAlignment='bottom'),
-        export=dict(enabled=True),
+        # export=dict(enabled=True),
         series=dict(
             smallValuesGrouping=dict(mode='topN', topCount=3),
             argumentField='language',
@@ -124,6 +141,40 @@
                 connector=dict(visible=True, width=1)
             )
         )
+    ),
+    ddx.PieChart(
+        type='doughnut',
+        palette='Soft Pastel',
+        title='Top Internet Languages',
+        dataSource=pieExportImportDataSource,
+        legend=dict(horizontalAlignment='center', verticalAlignment='bottom'),
+        # export=dict(enabled=True),
+        series=[
+            dict(
+                name='Export',
+                smallValuesGrouping=dict(mode='topN', topCount=3),
+                argumentField='Country',
+                valueField='Export',
+                label=dict(
+                    visible=True,
+                    format='fixedPoint',
+                    customizeText='doughnut_chart',
+                    connector=dict(visible=True, width=1)
+                )
+            ),
+            dict(
+                name='Import',
+                smallValuesGrouping=dict(mode='topN', topCount=3),
+                argumentField='Country',
+                valueField='Import',
+                label=dict(
+                    visible=True,
+                    format='fixedPoint',
+                    customizeText='doughnut_chart',
+                    connector=dict(visible=True, width=1)
+                )
+            )
+        ]
     )
 ])
 

diff --git a/dash_devextreme/dash_devextreme.dev.js b/dash_devextreme/dash_devextreme.dev.js
diff --git a/dash_devextreme/dash_devextreme.min.js b/dash_devextreme/dash_devextreme.min.js
diff --git a/dash_devextreme/metadata.json b/dash_devextreme/metadata.json
@@ -1222,7 +1222,7 @@
         "modifiers": [],
         "params": [
           {
-            "name": "template_id",
+            "name": "series",
             "type": null
           }
         ],
@@ -1837,11 +1837,7 @@
           "name": "object"
         },
         "required": false,
-        "description": "",
-        "defaultValue": {
-          "value": "{}",
-          "computed": false
-        }
+        "description": ""
       },
       "size": {
         "type": {

diff --git a/dash_devextreme/package.json b/dash_devextreme/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dash-devextreme",
-    "version": "0.10.0",
+    "version": "0.10.1",
     "description": "Wrapper of DevExtreme components for Plotly Dash",
     "main": "build/index.js",
     "repository": {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "dash-devextreme",
-    "version": "0.10.0",
+    "version": "0.10.1",
     "description": "Wrapper of DevExtreme components for Plotly Dash",
     "main": "build/index.js",
     "repository": {

diff --git a/src/lib/components/PieChart.react.js b/src/lib/components/PieChart.react.js
@@ -11,26 +11,28 @@ export default class PieChart extends Component {
         this.customizeText = this.customizeText.bind(this);
     }
 
-    customizeText(template_id) {
-        return window[template_id];
+    customizeText(series) {
+        if (typeof series === 'object' && series.label && series.label.customizeText) {
+            if (window[series.label.customizeText]) {
+                series.label.customizeText = window[series.label.customizeText];
+            }
+        }
     }
 
     render() {
         const {series} = this.props;
-        if (series && typeof series === 'object' && series.label && series.label.customizeText) {
-            series.label.customizeText = this.customizeText(series.label.customizeText)
+        if (series) {
+            if (Array.isArray(series)) {
+                for(let i=0; i < series.length; i++) {
+                    this.customizeText(series[i]);
+                }
+            } else {
+                this.customizeText(series);
+            }
         }
 
         return (
-            <DXPieChart
-                id={this.props.id}
-                type={this.props.type}
-                title={this.props.title}
-                palette={this.props.palette}
-                dataSource={this.props.dataSource}
-                series={series}
-                legend={this.props.legend}
-            />
+            <DXPieChart {...this.props}/>
         )
     }
 }
@@ -132,7 +134,7 @@ PieChart.defaultProps = {
     rtlEnabled: false,
     segmentsDirection: 'clockwise',
     series: [],
-    seriesTemplate: {},
+    // seriesTemplate: undefined,
     size: {},
     // sizeGroup: undefined,
     startAngle: 0,

diff --git a/usage.py b/usage.py
@@ -40,14 +40,14 @@
         title='Top Internet Languages',
         dataSource=dataSource,
         legend=dict(horizontalAlignment='center', verticalAlignment='bottom'),
-        export=dict(enabled=True),
+        # export=dict(enabled=True),
         series=dict(
             smallValuesGrouping=dict(mode='topN', topCount=3),
             argumentField='language',
             valueField='percent',
             label=dict(
                 visible=True,
-                customizeText='argumentText',
+                customizeText='valueText',
                 format='fixedPoint',
                 connector=dict(visible=True, width=1)
             )