@mwater/visualization 5.4.5 → 5.5.0

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

@@ -1,24 +1,24 @@
-// TODO: This file was created by bulk-decaffeinate.
-// Sanity-check the conversion and remove this comment.
 // Misc utils for layered charts
 
+import { LiteralType } from "@mwater/expressions"
+
 // Get possible types for axis of a layer
-export function getAxisTypes(design: any, layer: any, axis: any) {
+export function getAxisTypes(design: any, layer: any, axis: any): LiteralType[] | null {
   // If categorical
   const layerType = layer.type || design.type
 
   switch (axis) {
     case "x":
       if (layerType === "bar") {
-        return ["enum", "enumset", "text", "date", "boolean"]
+        return ["enum", "enumset", "text", "date", "boolean"] as LiteralType[]
       }
 
       // More broad
-      return ["enum", "text", "number", "boolean", "date"]
+      return ["enum", "text", "number", "boolean", "date"] as LiteralType[]
     case "color":
-      return ["enum", "text", "date", "boolean"]
+      return ["enum", "text", "date", "boolean"] as LiteralType[]
     case "y":
-      return ["number"]
+      return ["number"] as LiteralType[]
   }
   return null
 }

package/src/widgets/charts/pivot/PivotChart.ts

@@ -495,4 +495,195 @@ export default class PivotChart extends Chart {
       }
     })
   }
+
+  // Override to indicate this chart supports XLSX export
+  supportsXlsxExport(): boolean {
+    return true
+  }
+
+  // Creates a SheetJS workbook for the pivot chart data
+  createXlsxWorkbook(design: PivotChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any {
+    // Import XLSX here to ensure it's available
+    const XLSX = require("xlsx-js-style")
+    const Color = require("color")
+    
+    // Create a new workbook
+    const workbook = XLSX.utils.book_new()
+    
+    // Build layout using the layout builder 
+    const layoutBuilder = new PivotChartLayoutBuilder({ schema })
+    const layout = layoutBuilder.buildLayout(design, data, locale)
+    
+    // Create a 2D array for the worksheet data
+    const wsData: any[][] = []
+    
+    // Process each row in the layout
+    layout.rows.forEach(layoutRow => {
+      const rowData: any[] = []
+      
+      // Process each cell in the row
+      layoutRow.cells.forEach(cell => {
+        // For skipped cells, still add an empty placeholder
+        if (cell.skip) {
+          rowData.push({ v: "", s: {} })
+          return
+        }
+        
+        // Create cell value and style
+        const cellObj: any = { 
+          v: cell.text === null || cell.text === undefined ? "" : cell.text, 
+          s: {} 
+        }
+        
+        // Apply alignment based on cell type and subtype
+        if (cell.align === "right") {
+          cellObj.s.alignment = { horizontal: "right" }
+        } else if (cell.align === "center") {
+          cellObj.s.alignment = { horizontal: "center" }
+        } else {
+          cellObj.s.alignment = { horizontal: "left" }
+        }
+        
+        // Apply styles based on cell properties
+        if (cell.bold) {
+          cellObj.s.font = { ...cellObj.s.font, bold: true }
+        }
+        
+        if (cell.italic) {
+          cellObj.s.font = { ...cellObj.s.font, italic: true }
+        }
+        
+        // Apply background color if present
+        if (cell.backgroundColor) {
+          try {
+            const color = Color(cell.backgroundColor)
+            const hex = color.hex().substring(1) // Remove #
+            
+            cellObj.s.fill = {
+              patternType: "solid",
+              fgColor: { rgb: hex },
+              bgColor: { rgb: hex }
+            }
+            
+            // Adjust text color based on background lightness
+            const lightness = color.luminosity()
+            cellObj.s.font = {
+              ...cellObj.s.font,
+              color: { rgb: lightness < 0.3 ? "FFFFFF" : "000000" }
+            }
+          } catch (e) {
+            // Silently ignore color errors
+          }
+        }
+        
+        // Apply borders
+        const borders: any = {}
+        if (cell.borderTop) {
+          const style = cell.borderTop === 1 ? "thin" : cell.borderTop === 2 ? "medium" : "thick"
+          borders.top = { style }
+        }
+        
+        if (cell.borderBottom) {
+          const style = cell.borderBottom === 1 ? "thin" : cell.borderBottom === 2 ? "medium" : "thick"
+          borders.bottom = { style }
+        }
+        
+        if (cell.borderLeft) {
+          const style = cell.borderLeft === 1 ? "thin" : cell.borderLeft === 2 ? "medium" : "thick"
+          borders.left = { style }
+        }
+        
+        if (cell.borderRight) {
+          const style = cell.borderRight === 1 ? "thin" : cell.borderRight === 2 ? "medium" : "thick"
+          borders.right = { style }
+        }
+        
+        if (Object.keys(borders).length > 0) {
+          cellObj.s.border = borders
+        }
+        
+        rowData.push(cellObj)
+      })
+      
+      wsData.push(rowData)
+    })
+    
+    // Create a worksheet from the data
+    const worksheet = XLSX.utils.aoa_to_sheet(wsData)
+    
+    // Process merged cells
+    const merges: { s: { r: number, c: number }, e: { r: number, c: number } }[] = []
+    
+    // Track current row and column position
+    let rowOffset = 0
+    
+    // Traverse layout again to collect merge info
+    layout.rows.forEach((layoutRow, rowIndex) => {
+      let colOffset = 0
+      
+      layoutRow.cells.forEach((cell, colIndex) => {
+        // Skip cells that are part of spans (already handled)
+        if (cell.skip) {
+          colOffset++
+          return
+        }
+        
+        // Handle row spans
+        if (cell.rowSpan && cell.rowSpan > 1) {
+          merges.push({
+            s: { r: rowOffset, c: colOffset },
+            e: { r: rowOffset + cell.rowSpan - 1, c: colOffset }
+          })
+        }
+        
+        // Handle column spans
+        if (cell.columnSpan && cell.columnSpan > 1) {
+          merges.push({
+            s: { r: rowOffset, c: colOffset },
+            e: { r: rowOffset, c: colOffset + cell.columnSpan - 1 }
+          })
+        }
+        
+        colOffset++
+      })
+      
+      rowOffset++
+    })
+    
+    // Apply merges to worksheet
+    if (merges.length > 0) {
+      worksheet["!merges"] = merges
+    }
+    
+    // Set column widths based on content
+    const colWidths = []
+    if (wsData.length > 0) {
+      for (let colIndex = 0; colIndex < wsData[0].length; colIndex++) {
+        // Start with reasonable default width
+        let maxWidth = 10
+        
+        // Check all rows for this column
+        for (let rowIndex = 0; rowIndex < wsData.length; rowIndex++) {
+          const cell = wsData[rowIndex][colIndex]
+          if (cell && cell.v) {
+            maxWidth = Math.max(maxWidth, String(cell.v).length)
+          }
+        }
+        
+        // Add some padding and cap at 50 characters
+        colWidths.push(Math.min(maxWidth + 2, 50))
+      }
+      
+      worksheet['!cols'] = colWidths.map(width => ({ wch: width }))
+    }
+    
+    // Add the worksheet to the workbook
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Pivot Table")
+    
+    // Convert workbook to blob
+    const workbookBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
+    const blob = new Blob([workbookBuffer], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" })
+    
+    return blob
+  }
 }

package/src/widgets/charts/pivot/PivotChartDesignerComponent.tsx

@@ -1,7 +1,6 @@
 import _ from "lodash"
 import PropTypes from "prop-types"
 import React from "react"
-const R = React.createElement
 import uuid from "uuid"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { FilterExprComponent } from "@mwater/expressions-ui"
@@ -78,18 +77,20 @@ export default class PivotChartDesignerComponent extends React.Component<
   }
 
   renderTable() {
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("i", { className: "fa fa-database" }), " ", T`Data Source`),
-      ": ",
-      R(TableSelectComponent, {
-        schema: this.props.schema,
-        value: this.props.design.table,
-        onChange: this.handleTableChange,
-        filter: this.props.design.filter,
-        onFilterChange: this.handleFilterChange
-      })
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <i className="fa fa-database" /> {T`Data Source`}
+        </label>
+        : {" "}
+        <TableSelectComponent
+          schema={this.props.schema}
+          value={this.props.design.table}
+          onChange={this.handleTableChange}
+          filter={this.props.design.filter}
+          onFilterChange={this.handleFilterChange}
+        />
+      </div>
     )
   }
 
@@ -99,21 +100,21 @@ export default class PivotChartDesignerComponent extends React.Component<
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, R("span", { className: "fas fa-filter" }), " ", T`Filters`),
-      R(
-        "div",
-        { style: { marginLeft: 8 } },
-        R(FilterExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          onChange: this.handleFilterChange,
-          table: this.props.design.table,
-          value: this.props.design.filter
-        })
-      )
+    return (
+      <div className="mb-3">
+        <label className="text-muted">
+          <span className="fas fa-filter" /> {T`Filters`}
+        </label>
+        <div style={{ marginLeft: 8 }}>
+          <FilterExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            onChange={this.handleFilterChange}
+            table={this.props.design.table}
+            value={this.props.design.filter}
+          />
+        </div>
+      </div>
     )
   }
 
@@ -123,41 +124,41 @@ export default class PivotChartDesignerComponent extends React.Component<
       return null
     }
 
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: T`Striping`
-      },
-      <ui.Radio
-        key="none"
-        inline
-        radioValue={null}
-        value={this.props.design.striping || null}
-        onChange={(value) => this.updateDesign({ striping: value })}
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={T`Striping`}
       >
-        {T`None`}
-      </ui.Radio>,
-
-      <ui.Radio
-        key="columns"
-        inline
-        radioValue={"columns"}
-        value={this.props.design.striping}
-        onChange={(value) => this.updateDesign({ striping: value })}
-      >
-        {T`Columns`}
-      </ui.Radio>,
-
-      <ui.Radio
-        key="rows"
-        inline
-        value={this.props.design.striping}
-        radioValue={"rows"}
-        onChange={(value) => this.updateDesign({ striping: value })}
-      >
-        {T`Rows`}
-      </ui.Radio>
+        <ui.Radio
+          key="none"
+          inline
+          radioValue={null}
+          value={this.props.design.striping || null}
+          onChange={(value) => this.updateDesign({ striping: value })}
+        >
+          {T`None`}
+        </ui.Radio>
+
+        <ui.Radio
+          key="columns"
+          inline
+          radioValue={"columns"}
+          value={this.props.design.striping}
+          onChange={(value) => this.updateDesign({ striping: value })}
+        >
+          {T`Columns`}
+        </ui.Radio>
+
+        <ui.Radio
+          key="rows"
+          inline
+          value={this.props.design.striping}
+          radioValue={"rows"}
+          onChange={(value) => this.updateDesign({ striping: value })}
+        >
+          {T`Rows`}
+        </ui.Radio>
+      </ui.FormGroup>
     )
   }
 
@@ -165,77 +166,71 @@ export default class PivotChartDesignerComponent extends React.Component<
   renderSetup() {
     const intersectionId = `${this.props.design.rows[0].id}:${this.props.design.columns[0].id}`
 
-    return R(
-      "div",
-      null,
-      R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: T`Columns`,
-          help: T`Field to optionally make columns out of`
-        },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table,
-          types: ["enum", "enumset", "text", "boolean", "date"],
-          aggrNeed: "none",
-          value: this.props.design.columns[0].valueAxis,
-          onChange: this.handleColumnChange,
-          filters: this.props.filters
-        })
-      ),
-
-      R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: T`Rows`,
-          help: T`Field to optionally make rows out of`
-        },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table,
-          types: ["enum", "enumset", "text", "boolean", "date"],
-          aggrNeed: "none",
-          value: this.props.design.rows[0].valueAxis,
-          onChange: this.handleRowChange,
-          filters: this.props.filters
-        })
-      ),
-
-      R(
-        ui.FormGroup,
-        {
-          labelMuted: true,
-          label: T`Value`,
-          help: T`Field show in cells`
-        },
-        R(AxisComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.design.table,
-          types: ["enum", "text", "boolean", "date", "number"],
-          aggrNeed: "required",
-          value: this.props.design.intersections[intersectionId].valueAxis,
-          onChange: this.handleIntersectionValueAxisChange,
-          showFormat: true,
-          filters: this.props.filters
-        })
-      )
+    return (
+      <div>
+        <ui.FormGroup
+          labelMuted={true}
+          label={T`Columns`}
+          help={T`Field to optionally make columns out of`}
+        >
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table}
+            types={["enum", "enumset", "text", "boolean", "date"]}
+            aggrNeed="none"
+            value={this.props.design.columns[0].valueAxis}
+            onChange={this.handleColumnChange}
+            filters={this.props.filters}
+          />
+        </ui.FormGroup>
+
+        <ui.FormGroup
+          labelMuted={true}
+          label={T`Rows`}
+          help={T`Field to optionally make rows out of`}
+        >
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table}
+            types={["enum", "enumset", "text", "boolean", "date"]}
+            aggrNeed="none"
+            value={this.props.design.rows[0].valueAxis}
+            onChange={this.handleRowChange}
+            filters={this.props.filters}
+          />
+        </ui.FormGroup>
+
+        <ui.FormGroup
+          labelMuted={true}
+          label={T`Value`}
+          help={T`Field show in cells`}
+        >
+          <AxisComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table}
+            types={["enum", "text", "boolean", "date", "number"]}
+            aggrNeed="required"
+            value={this.props.design.intersections[intersectionId].valueAxis}
+            onChange={this.handleIntersectionValueAxisChange}
+            showFormat={true}
+            filters={this.props.filters}
+          />
+        </ui.FormGroup>
+      </div>
     )
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      this.renderTable(),
-      this.state.isNew && this.props.design.table ? this.renderSetup() : undefined,
-      this.renderFilter(),
-      this.renderStriping()
+    return (
+      <div>
+        {this.renderTable()}
+        {this.state.isNew && this.props.design.table ? this.renderSetup() : undefined}
+        {this.renderFilter()}
+        {this.renderStriping()}
+      </div>
     )
   }
 }

package/src/widgets/charts/pivot/PivotChartLayoutBuilder.ts

@@ -12,8 +12,10 @@ const maxColumns = 50
 
 export type PivotChartData = { [intersectionId: string]: any[] }
 
-// Builds pivot table layout from the design and data
-// See PivotChart Design.md for more detauls
+/** 
+ * Builds pivot table layout from the design and data
+ * See PivotChartDesign.ts for more details
+ */
 export default class PivotChartLayoutBuilder {
   schema: Schema
   exprUtils: ExprUtils