@mwater/visualization 5.4.5 → 5.6.0

package/src/widgets/charts/Chart.ts

@@ -156,4 +156,21 @@ export default class Chart {
   translateDesign(design: any, translate: (input: string) => string): any {
     return design
   }
+
+  /** Determines if the chart supports exporting to XLSX format */
+  supportsXlsxExport(): boolean {
+    return false
+  }
+
+  /** Creates a SheetJS workbook for the chart data 
+   * @param design Chart design
+   * @param schema Schema to use
+   * @param dataSource Data source
+   * @param data Data from chart
+   * @param locale Locale to use
+   * @returns base64 encoded XLSX file
+   */
+  createXlsxWorkbook(design: any, schema: Schema, dataSource: DataSource, data: any, locale: string): string {
+    throw new Error("Not implemented")
+  }
 }

package/src/widgets/charts/ChartWidgetComponent.tsx

@@ -104,6 +104,36 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
     })
   }
 
+  // Saves an xlsx file to disk
+  handleSaveXlsxFile = () => {
+    // Get the data
+    this.props.widgetDataSource.getData(this.props.design, this.props.filters, (err: any, data: any) => {
+      if (err) {
+        console.error(err)
+        alert(T`Failed to get data: ${err.message}`)
+        return
+      }
+
+      try {
+        // Create workbook
+        const blob = this.props.chart.createXlsxWorkbook(
+          this.props.design,
+          this.props.schema,
+          this.props.dataSource,
+          data,
+          this.context
+        )
+
+        // Require at use as causes server problems
+        const FileSaver = require("file-saver")
+        FileSaver.saveAs(blob, "Exported Data.xlsx")
+      } catch (ex) {
+        console.error(ex)
+        alert(T`Failed to export data: ${ex.message}`)
+      }
+    })
+  }
+
   handleStartEditing = () => {
     // Can't edit if already editing
     if (this.state.editDesign) {
@@ -259,7 +289,12 @@ export class ChartWidgetComponent extends React.PureComponent<ChartWidgetCompone
       this.props.filters
     )
     if (!designError) {
-      dropdownItems.push({ label: T`Export Data`, onClick: this.handleSaveCsvFile })
+      dropdownItems.push({ label: T`Export Data (CSV)`, onClick: this.handleSaveCsvFile })
+      
+      // Add XLSX export option if supported
+      if (this.props.chart.supportsXlsxExport()) {
+        dropdownItems.push({ label: T`Export Data (XLSX)`, onClick: this.handleSaveXlsxFile })
+      }
     }
     if (this.props.onDesignChange != null) {
       dropdownItems.unshift({

package/src/widgets/charts/layered/LayeredChartDesign.ts

@@ -66,7 +66,7 @@ export interface LayeredChartDesign {
 
 export interface LayeredChartDesignLayer {
   /** bar/line/spline/scatter/area/pie/donut (overrides main one) */
-  type: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut"
+  type?: "bar" | "line" | "spline" | "scatter" | "area" | "pie" | "donut"
 
   /** table of layer */
   table: string

package/src/widgets/charts/layered/LayeredChartDesignerComponent.tsx

@@ -197,11 +197,10 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       </div>
     )
   }
-
   renderType() {
     const chartTypes = [
       { id: "bar", name: T`Bar`, desc: T`Best for most charts` },
-      { id: "pie", name: T`Pie`, desc: T`Compare ratios of one variable` },
+      { id: "pie", name: T`Pie`, desc: T`Compare ratios of one variable` }, 
       { id: "donut", name: T`Donut`, desc: T`Pie chart with center removed` },
       { id: "line", name: T`Line`, desc: T`Show how data changes smoothly over time` },
       { id: "spline", name: T`Smoothed Line`, desc: T`For noisy data over time` },
@@ -209,29 +208,29 @@ export default class LayeredChartDesignerComponent extends React.Component<Layer
       { id: "area", name: T`Area`, desc: T`For cumulative data over time` }
     ]
 
-    const current = _.findWhere(chartTypes, { id: this.props.design.type })
+    const current = chartTypes.find(ct => ct.id === this.props.design.type)
 
-    return R(
-      uiComponents.SectionComponent,
-      { icon: "glyphicon-th", label: T`Chart Type` },
-      R(uiComponents.ToggleEditComponent, {
-        forceOpen: !this.props.design.type,
-        label: current ? current.name : "",
-        editor: (onClose: any) => {
-          return R(uiComponents.OptionListComponent, {
-            hint: T`Select a Chart Type`,
-            items: _.map(chartTypes, ct => ({
-              name: ct.name,
-              desc: ct.desc,
-              onClick: () => {
-                onClose() // Close editor first
-                return this.handleTypeChange(ct.id)
-              }
-            }))
-          })
-        }
-      }),
-      this.renderOptions()
+    return (
+      <uiComponents.SectionComponent label={T`Chart Type`}>
+        <uiComponents.ToggleEditComponent
+          forceOpen={!this.props.design.type}
+          label={current ? current.name : ""}
+          editor={(onClose: any) => (
+            <uiComponents.OptionListComponent
+              hint={T`Select a Chart Type`}
+              items={chartTypes.map(ct => ({
+                name: ct.name,
+                desc: ct.desc,
+                onClick: () => {
+                  onClose() // Close editor first
+                  return this.handleTypeChange(ct.id)
+                }
+              }))}
+            />
+          )}
+        />
+        {this.renderOptions()}
+      </uiComponents.SectionComponent>
     )
   }