@mwater/visualization 5.4.4 → 5.5.0

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

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import AxisComponent from "../../../axes/AxisComponent"
@@ -86,45 +85,42 @@ export default class SegmentDesignerComponent extends React.Component<
   }
 
   renderMode() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: T`Type`
-      },
-      <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
-        {T`Single ${this.props.segmentType}`}
-        <span className="text-muted">
-          {` - `}
-          {T`used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
-        </span>
-      </ui.Radio>,
+    return (
+      <ui.FormGroup labelMuted={true} label={T`Type`}>
+        <ui.Radio key="single" value={this.state.mode} radioValue={"single"} onChange={this.handleMode}>
+          {T`Single ${this.props.segmentType}`}
+          <span className="text-muted">
+            {` - `}
+            {T`used for summary ${this.props.segmentType}s and empty ${this.props.segmentType}s`}
+          </span>
+        </ui.Radio>
 
-      <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
-        {T`Multiple ${this.props.segmentType}s`}
-        {" - "}
-        <span className="text-muted">{T`disaggregate data by a field`}</span>
-      </ui.Radio>
+        <ui.Radio key="multiple" value={this.state.mode} radioValue={"multiple"} onChange={this.handleMode}>
+          {T`Multiple ${this.props.segmentType}s`}
+          {" - "}
+          <span className="text-muted">{T`disaggregate data by a field`}</span>
+        </ui.Radio>
+      </ui.FormGroup>
     )
   }
 
   renderLabel() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: T`Label`,
-        help: this.state.mode === "multiple" ? T`Optional label for the ${this.props.segmentType}s` : undefined
-      },
-      R("input", {
-        ref: (elem: HTMLInputElement | null) => {
-          this.labelElem = elem
-        },
-        type: "text",
-        className: "form-control",
-        value: this.props.segment.label || "",
-        onChange: this.handleLabelChange
-      })
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={T`Label`}
+        help={this.state.mode === "multiple" ? T`Optional label for the ${this.props.segmentType}s` : undefined}
+      >
+        <input
+          ref={(elem: HTMLInputElement | null) => {
+            this.labelElem = elem
+          }}
+          type="text"
+          className="form-control"
+          value={this.props.segment.label || ""}
+          onChange={this.handleLabelChange}
+        />
+      </ui.FormGroup>
     )
   }
 
@@ -137,20 +133,18 @@ export default class SegmentDesignerComponent extends React.Component<
 
     return <ui.FormGroup labelMuted label={T`Field`} help={T`Field to disaggregate data by`}>
       <div style={{ marginLeft: 8 }}>
-        {
-          R(AxisComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.table,
-            types: ["enum", "enumset", "text", "boolean", "date"],
-            aggrNeed: "none",
-            value: this.props.segment.valueAxis,
-            onChange: this.handleValueAxisChange,
-            allowExcludedValues: true,
-            filters: this.props.filters,
-            collapseCategories: true
-          })
-        }
+        <AxisComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.table}
+          types={["enum", "enumset", "text", "boolean", "date"]}
+          aggrNeed="none"
+          value={this.props.segment.valueAxis}
+          onChange={this.handleValueAxisChange}
+          allowExcludedValues={true}
+          filters={this.props.filters}
+          collapseCategories={true}
+        />
         { allowValueAxisOnlyValuesPresent ?
           <ui.Checkbox
             value={this.props.segment.valueAxisOnlyValuesPresent}
@@ -168,158 +162,144 @@ export default class SegmentDesignerComponent extends React.Component<
   }
 
   renderFilter() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: [R(ui.Icon, { id: "glyphicon-filter" }), " ", T`Filters`],
-        hint: T`Filters all data associated with this ${this.props.segmentType}`
-      },
-      R(FilterExprComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        onChange: this.handleFilterChange,
-        table: this.props.table,
-        value: this.props.segment.filter
-      })
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={<><ui.Icon id="glyphicon-filter" /> {T`Filters`}</>}
+        hint={T`Filters all data associated with this ${this.props.segmentType}`}
+      >
+        <FilterExprComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          onChange={this.handleFilterChange}
+          table={this.props.table}
+          value={this.props.segment.filter}
+        />
+      </ui.FormGroup>
     )
   }
 
   renderStyling() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: T`Styling`
-      },
-      <div>
-        <ui.Checkbox
-          key="bold"
-          inline
-          value={this.props.segment.bold === true}
-          onChange={(value) => this.update({ bold: value })}
-        >
-          {T`Bold`}
-        </ui.Checkbox>
-        <ui.Checkbox
-          key="italic"
-          inline
-          value={this.props.segment.italic === true}
-          onChange={(value) => this.update({ italic: value })}
-        >
-          {T`Italic`}
-        </ui.Checkbox>
-        { this.props.segment.valueAxis && this.props.segment.label ? 
-        <ui.Checkbox
-          key="valueLabelBold"
-          inline
-          value={this.props.segment.valueLabelBold === true}
-          onChange={(value) => this.update({ valueLabelBold: value })}
-        >
-          {T`Header Bold`}
-        </ui.Checkbox>
-        : undefined}
-        {this.props.segment.valueAxis && this.props.segment.label
-          ? R(
-              "div",
-              { style: { paddingTop: 5 } },
-              T`Shade filler cells: `,
-              R(ColorComponent, {
-                color: this.props.segment.fillerColor,
-                onChange: (color: any) => this.update({ fillerColor: color })
-              })
-            )
+    return (
+      <ui.FormGroup labelMuted={true} label={T`Styling`}>
+        <div>
+          <ui.Checkbox
+            key="bold"
+            inline
+            value={this.props.segment.bold === true}
+            onChange={(value) => this.update({ bold: value })}
+          >
+            {T`Bold`}
+          </ui.Checkbox>
+          <ui.Checkbox
+            key="italic"
+            inline
+            value={this.props.segment.italic === true}
+            onChange={(value) => this.update({ italic: value })}
+          >
+            {T`Italic`}
+          </ui.Checkbox>
+          { this.props.segment.valueAxis && this.props.segment.label ? 
+          <ui.Checkbox
+            key="valueLabelBold"
+            inline
+            value={this.props.segment.valueLabelBold === true}
+            onChange={(value) => this.update({ valueLabelBold: value })}
+          >
+            {T`Header Bold`}
+          </ui.Checkbox>
           : undefined}
-      </div>
+          {this.props.segment.valueAxis && this.props.segment.label ? (
+            <div style={{ paddingTop: 5 }}>
+              {T`Shade filler cells: `}
+              <ColorComponent
+                color={this.props.segment.fillerColor}
+                onChange={(color: any) => this.update({ fillerColor: color })}
+              />
+            </div>
+          ) : undefined}
+        </div>
+      </ui.FormGroup>
     )
   }
 
   renderBorders() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: T`Borders`
-      },
-      R("div", { key: "before" }, this.props.segmentType === "row" ? T`Top: ` : T`Left: `),
-      R(BorderComponent, {
-        value: this.props.segment.borderBefore,
-        defaultValue: 2,
-        onChange: (value: any) => this.update({ borderBefore: value })
-      }),
-      R("div", { key: "within" }, T`Within: `),
-      R(BorderComponent, {
-        value: this.props.segment.borderWithin,
-        defaultValue: 1,
-        onChange: (value: any) => this.update({ borderWithin: value })
-      }),
-      R("div", { key: "after" }, this.props.segmentType === "row" ? T`Bottom: ` : T`Right: `),
-      R(BorderComponent, {
-        value: this.props.segment.borderAfter,
-        defaultValue: 2,
-        onChange: (value: any) => this.update({ borderAfter: value })
-      })
+    return (
+      <ui.FormGroup labelMuted={true} label={T`Borders`}>
+        <div key="before">{this.props.segmentType === "row" ? T`Top: ` : T`Left: `}</div>
+        <BorderComponent
+          value={this.props.segment.borderBefore}
+          defaultValue={2}
+          onChange={(value: any) => this.update({ borderBefore: value })}
+        />
+        <div key="within">{T`Within: `}</div>
+        <BorderComponent
+          value={this.props.segment.borderWithin}
+          defaultValue={1}
+          onChange={(value: any) => this.update({ borderWithin: value })}
+        />
+        <div key="after">{this.props.segmentType === "row" ? T`Bottom: ` : T`Right: `}</div>
+        <BorderComponent
+          value={this.props.segment.borderAfter}
+          defaultValue={2}
+          onChange={(value: any) => this.update({ borderAfter: value })}
+        />
+      </ui.FormGroup>
     )
   }
 
   renderOrderExpr() {
-    return R(
-      ui.FormGroup,
-      {
-        labelMuted: true,
-        label: [R(ui.Icon, { id: "fa-sort-amount-asc" }), " ", T`Sort`],
-        hint: T`Sorts the display of this ${this.props.segmentType}`
-      },
-      R(ExprComponent, {
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        onChange: this.handleOrderExprChange,
-        table: this.props.table,
-        types: ["enum", "text", "boolean", "date", "datetime", "number"],
-        aggrStatuses: ["aggregate"],
-        value: this.props.segment.orderExpr ?? null
-      }),
+    return (
+      <ui.FormGroup
+        labelMuted={true}
+        label={<><ui.Icon id="fa-sort-amount-asc" /> {T`Sort`}</>}
+        hint={T`Sorts the display of this ${this.props.segmentType}`}
+      >
+        <ExprComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          onChange={this.handleOrderExprChange}
+          table={this.props.table}
+          types={["enum", "text", "boolean", "date", "datetime", "number"]}
+          aggrStatuses={["aggregate"]}
+          value={this.props.segment.orderExpr ?? null}
+        />
 
-      this.props.segment.orderExpr
-        ? R(
-            "div",
-            null,
-            R(
-              ui.Radio,
-              {
-                value: this.props.segment.orderDir || "asc",
-                radioValue: "asc",
-                onChange: this.handleOrderDirChange,
-                inline: true
-              },
-              T`Ascending`
-            ),
-            R(
-              ui.Radio,
-              {
-                value: this.props.segment.orderDir || "asc",
-                radioValue: "desc",
-                onChange: this.handleOrderDirChange,
-                inline: true
-              },
-              T`Descending`
-            )
-          )
-        : undefined
+        {this.props.segment.orderExpr ? (
+          <div>
+            <ui.Radio
+              value={this.props.segment.orderDir || "asc"}
+              radioValue="asc"
+              onChange={this.handleOrderDirChange}
+              inline={true}
+            >
+              {T`Ascending`}
+            </ui.Radio>
+            <ui.Radio
+              value={this.props.segment.orderDir || "asc"}
+              radioValue="desc"
+              onChange={this.handleOrderDirChange}
+              inline={true}
+            >
+              {T`Descending`}
+            </ui.Radio>
+          </div>
+        ) : undefined}
+      </ui.FormGroup>
     )
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      this.renderMode(),
-      this.state.mode ? this.renderLabel() : undefined,
-      this.state.mode === "multiple" ? this.renderValueAxis() : undefined,
-      this.state.mode ? this.renderFilter() : undefined,
-      this.state.mode === "multiple" ? this.renderOrderExpr() : undefined,
-      this.state.mode ? this.renderStyling() : undefined,
-      this.state.mode ? this.renderBorders() : undefined
+    return (
+      <div>
+        {this.renderMode()}
+        {this.state.mode ? this.renderLabel() : undefined}
+        {this.state.mode === "multiple" ? this.renderValueAxis() : undefined}
+        {this.state.mode ? this.renderFilter() : undefined}
+        {this.state.mode === "multiple" ? this.renderOrderExpr() : undefined}
+        {this.state.mode ? this.renderStyling() : undefined}
+        {this.state.mode ? this.renderBorders() : undefined}
+      </div>
     )
   }
 }
@@ -335,21 +315,21 @@ class BorderComponent extends React.Component<BorderComponentProps> {
   render() {
     const value = this.props.value != null ? this.props.value : this.props.defaultValue
 
-    return R(
-      "span",
-      null,
-      <Radio inline value={value} radioValue={0} onChange={() => this.props.onChange(0)}>
-        {T`None`}
-      </Radio>,
-      <Radio inline value={value} radioValue={1} onChange={() => this.props.onChange(1)}>
-        {T`Light`}
-      </Radio>,
-      <Radio inline value={value} radioValue={2} onChange={() => this.props.onChange(2)}>
-        {T`Medium`}
-      </Radio>,
-      <Radio inline value={value} radioValue={3} onChange={() => this.props.onChange(3)}>
-        {T`Heavy`}
-      </Radio>
+    return (
+      <span>
+        <Radio inline value={value} radioValue={0} onChange={() => this.props.onChange(0)}>
+          {T`None`}
+        </Radio>
+        <Radio inline value={value} radioValue={1} onChange={() => this.props.onChange(1)}>
+          {T`Light`}
+        </Radio>
+        <Radio inline value={value} radioValue={2} onChange={() => this.props.onChange(2)}>
+          {T`Medium`}
+        </Radio>
+        <Radio inline value={value} radioValue={3} onChange={() => this.props.onChange(3)}>
+          {T`Heavy`}
+        </Radio>
+      </span>
     )
   }
 }

package/src/widgets/charts/table/TableChart.ts

@@ -1,6 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import uuid from "uuid"
 import { default as produce } from "immer"
 import { original } from "immer"
@@ -15,6 +14,8 @@ import { JsonQLSelectQuery } from "@mwater/jsonql"
 import { Axis } from "../../../axes/Axis"
 import { JsonQLFilter } from "../../../JsonQLFilter"
 import { Image } from "@mwater/forms/lib/RotationAwareImageComponent"
+import * as XLSX from "xlsx-js-style"
+import Color from "color"
 
 export interface TableChartDesign {
   version?: number
@@ -448,4 +449,179 @@ export default class TableChart extends Chart {
       }
     })
   }
+
+  // Override to indicate this chart supports XLSX export
+  supportsXlsxExport(): boolean {
+    return true
+  }
+
+  // Creates a SheetJS workbook for the chart data
+  createXlsxWorkbook(design: TableChartDesign, schema: Schema, dataSource: DataSource, data: any, locale: string): any {
+    const exprUtils = new ExprUtils(schema)
+    const axisBuilder = new AxisBuilder({ schema })
+    const workbook = XLSX.utils.book_new()
+    
+    // Create array for headers
+    const headers = design.columns.map(column => column.headerText || exprUtils.summarizeExpr(column.textAxis?.expr || null, locale))
+    
+    // Create arrays for data
+    const rows = data.main.map((record: any) => {
+      return design.columns.map((column: any, columnIndex: number) => {
+        const value = record[`c${columnIndex}`]
+        if (value == null) {
+          return ""
+        }
+        
+        const exprType = exprUtils.getExprType(column.textAxis?.expr)
+        
+        // Handle images as URLs
+        if (exprType === "image" && value) {
+          return dataSource.getImageUrl(value.id)
+        }
+        
+        if (exprType === "imagelist" && value) {
+          return value.map((img: Image) => dataSource.getImageUrl(img.id)).join(", ")
+        }
+        
+        // Handle dates properly for Excel
+        if (exprType === "date" && value) {
+          // Convert date string to JavaScript Date object
+          const date = new Date(value)
+          // Return a date that Excel can properly handle
+          return date
+        }
+        
+        // Handle datetime properly for Excel
+        if (exprType === "datetime" && value) {
+          // Convert datetime string to JavaScript Date object
+          const date = new Date(value)
+          // Return a date that Excel can properly handle
+          return date
+        }
+        
+        return exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, locale)
+      })
+    })
+    
+    // Add summary row if exists
+    if (data.summary) {
+      const summaryRow = design.columns.map((column: any, columnIndex: number) => {
+        if (data.summary[`c${columnIndex}`] != null) {
+          return data.summary[`c${columnIndex}`]
+        }
+        return ""
+      })
+      rows.push(summaryRow)
+    }
+    
+    // Create worksheet from data
+    const worksheet = XLSX.utils.aoa_to_sheet([headers, ...rows])
+    
+    // Set column widths based on content
+    const colWidths = headers.map((header, colIndex) => {
+      // Start with header width
+      let maxWidth = header.length
+      
+      // Check data rows
+      rows.forEach((row: any[]) => {
+        const cellValue = row[colIndex]
+        if (cellValue) {
+          maxWidth = Math.max(maxWidth, String(cellValue).length)
+        }
+      })
+      
+      // Add some padding and cap at 50 characters
+      return Math.min(maxWidth + 2, 50)
+    })
+    
+    worksheet['!cols'] = colWidths.map(width => ({ wch: width }))
+    
+    // Apply cell styles and background colors
+    const range = XLSX.utils.decode_range(worksheet['!ref']!)
+    
+    for (let rowIndex = 0; rowIndex <= range.e.r; rowIndex++) {
+      for (let colIndex = 0; colIndex <= range.e.c; colIndex++) {
+        const cellAddress = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex })
+        const cell = worksheet[cellAddress]
+        
+        // Skip empty cells
+        if (!cell) continue
+        
+        // Initialize style object if needed
+        if (!cell.s) cell.s = {}
+        
+        // Apply header styles
+        if (rowIndex === 0) {
+          cell.s = {
+            ...cell.s,
+            font: { bold: true },
+            alignment: { horizontal: "center" },
+            border: {
+              bottom: { style: "thin" }
+            }
+          }
+        }
+        
+        // Apply background colors for data cells
+        if (rowIndex > 0 && rowIndex <= data.main.length && colIndex < design.columns.length) {
+          const record = data.main[rowIndex - 1]
+          const column = design.columns[colIndex]
+          
+          // Check if this column has a background color axis and the bc property exists
+          if (column?.backgroundColorAxis && record[`bc${colIndex}`] !== undefined) {
+            // Use the Color library to handle the color value safely
+            try {
+              // Call getValueColor to get the actual color
+              const axisBuilder = new AxisBuilder({ schema })
+              const bgColor = axisBuilder.getValueColor(column.backgroundColorAxis, record[`bc${colIndex}`])
+              
+              if (bgColor) {
+                const color = Color(bgColor)
+                const hex = color.hex().substring(1) // Remove #
+                
+                // Apply the background color
+                cell.s.fill = {
+                  patternType: "solid",
+                  fgColor: { rgb: hex },
+                  bgColor: { rgb: hex }
+                }
+                
+                // Adjust text color based on background lightness
+                const lightness = color.luminosity()
+                cell.s.font = {
+                  ...cell.s.font,
+                  color: { rgb: lightness < 0.3 ? "CCCCCC" : "000000" }
+                }
+              }
+            } catch (e) {
+              // Silently ignore color errors
+              console.error("Error applying background color", e)
+            }
+          }
+        }
+        
+        // Apply summary row styling
+        if (data.summary && rowIndex === rows.length) {
+          cell.s = {
+            ...cell.s,
+            font: { bold: true },
+            border: {
+              top: { style: "thin" }
+            }
+          }
+        }
+      }
+    }
+
+    console.log(worksheet)
+    
+    // Add the worksheet to the workbook
+    XLSX.utils.book_append_sheet(workbook, worksheet, "Data")
+
+    // 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
+  }
 }