Splitting data, adding prompts and scripts (#102)

* Adding plotly examples app

* Splitting the data into seperate files

* Changes to test certain functionalities

apps/plotly_examples/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@fluentui/react-charting": "*",
+    "@fluentui/react-charting": "^5.23.29",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",
@@ -32,5 +32,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5"
   }
 }

apps/plotly_examples/scripts/add-id.py

@@ -0,0 +1,16 @@
+# python script to add ID for each dataset
+import json
+
+# Load the JSON data from a file
+with open('parsed_data.json', 'r') as file:
+    data = json.load(file)
+
+# Add an id tag to each data entry
+for index, entry in enumerate(data):
+    entry['id'] = index + 1
+
+# Write the modified data back to a JSON file
+with open('parsed_data_with_ids.json', 'w') as file:
+    json.dump(data, file, indent=2)
+
+print("IDs added successfully.")

apps/plotly_examples/scripts/parseJson.py

@@ -0,0 +1,29 @@
+#Parses the json out of the dataset generated by LLM
+import json
+import re
+
+# Read the file content
+with open('dataset.json', 'r') as file:
+    content = file.read()
+
+# Extract JSON strings using regular expressions
+json_strings = re.findall(r'```json\n(.*?)\n```', content, re.DOTALL)
+
+# Initialize an empty list to store parsed data
+parsed_data = []
+
+# Parse the JSON strings, ensuring to check for None or empty strings
+for json_str in json_strings:
+    if json_str and json_str.strip():
+        try:
+            parsed_data.append(json.loads(json_str))
+        except json.JSONDecodeError as e:
+            print(f"Failed to parse JSON string: {json_str}")
+            print(f"Error: {e}")
+
+# Save the parsed data to a new file
+output_file = 'parsed_data.json'
+with open(output_file, 'w') as file:
+    json.dump(parsed_data, file, indent=2)
+
+print(f"Parsed data has been saved to {output_file}")

apps/plotly_examples/scripts/splitData.py

@@ -0,0 +1,18 @@
+import json
+import os
+
+# Load the JSON data from a file
+with open('parsed_data_with_ids.json', 'r') as file:
+    data = json.load(file)
+
+# Create a directory to store the split files
+output_dir = 'split_data'
+os.makedirs(output_dir, exist_ok=True)
+
+# Split each data entry into a new file
+for index, entry in enumerate(data):
+    output_file = os.path.join(output_dir, f'data_{index + 1}.json')
+    with open(output_file, 'w') as file:
+        json.dump(entry, file, indent=2)
+
+print("Data split into separate files successfully.")

apps/plotly_examples/src/components/DeclarativeChart.tsx

@@ -1,64 +1,122 @@
 import * as React from 'react';
 import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
-import { DeclarativeChart, DeclarativeChartProps, Schema } from '@fluentui/react-charting';
-import schemasData from '../data/parsed_data.json'; // Import the JSON data
+import { DeclarativeChart, DeclarativeChartProps, IDeclarativeChart, Schema } from '@fluentui/react-charting';
+import { Toggle } from '@fluentui/react/lib/Toggle';
 
 interface IDeclarativeChartState {
   selectedChoice: string;
+  selectedSchema: any;
+  schemasData: any[];
+  preSelectLegends: boolean;
+  selectedLegends: string;
 }
 
-const options: IDropdownOption[] = schemasData.map((schema) => {
-  const id = schema.id.toString() || 'unknown';
-  return {
-    key: id,
-    text: schema.layout?.title || 'unknown',
-  };
-});
+// Use require.context to load all JSON files from the split_data folder
+const requireContext = require.context('../data', false, /\.json$/);
+const schemasData = requireContext.keys().map((fileName: string) => ({
+  fileName: fileName.replace('./', ''),
+  schema: requireContext(fileName),
+}));
+
+const options: IDropdownOption[] = schemasData.map((data) => ({
+  key: (data.schema as { id: string }).id,
+  text: data.fileName,
+}));
 
 const dropdownStyles = { dropdown: { width: 200 } };
 
 export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarativeChartState> {
+  private _declarativeChartRef: React.RefObject<IDeclarativeChart>;
   constructor(props: DeclarativeChartProps) {
     super(props);
     this.state = {
-      selectedChoice: schemasData[0]?.id.toString() || 'unknown', // Set the first schema as the default choice if available
+      selectedChoice: (schemasData[0].schema as { id: string }).id || 'unknown', // Set the first file as the default choice if available
+      selectedSchema: schemasData[0]?.schema || null,
+      schemasData: schemasData,
+      preSelectLegends: false,
+      selectedLegends: '',
     };
-  }
-
-  public render(): JSX.Element {
-    return <div>{this._createDeclarativeChart()}</div>;
+    this._declarativeChartRef = React.createRef();
   }
 
   private _onChange = (ev: any, option?: IDropdownOption): void => {
-    this.setState({ selectedChoice: option?.key as string });
+    const selectedChoice = option?.key as string;
+    const selectedSchema = this.state.schemasData.find((data) => (data.schema as { id: string }).id === selectedChoice)?.schema;
+    this.setState({ selectedChoice, selectedSchema, selectedLegends: '' });
   };
 
-  private _getSchemaByKey(key: string): any {
-    const schema = schemasData.find((x: any) => x.id.toString() === key);
-    return schema ? schema : null;
+  private _onTogglePreselectLegends = (ev: React.MouseEvent<HTMLElement>, checked?: boolean) => {
+    this.setState({ preSelectLegends: checked! });
+  };
+
+  private fileSaver(url: string) {
+    const saveLink = document.createElement('a');
+    saveLink.href = url;
+    saveLink.download = 'converted-image.png';
+    document.body.appendChild(saveLink);
+    saveLink.click();
+    document.body.removeChild(saveLink);
   }
 
+  private _handleChartSchemaChanged = (eventData: Schema) => {
+    const { selectedLegends } = eventData.plotlySchema;
+    this.setState({ selectedLegends: selectedLegends.join(', ') });
+  };
+
   private _createDeclarativeChart(): JSX.Element {
-    const selectedPlotlySchema = this._getSchemaByKey(this.state.selectedChoice);
-    if (!selectedPlotlySchema) {
+    const { selectedSchema } = this.state;
+    if (!selectedSchema) {
       return <div>No data available</div>;
     }
-    const inputSchema: Schema = { plotlySchema: selectedPlotlySchema };
-    console.log(inputSchema);
+    const inputSchema: Schema = { plotlySchema: selectedSchema };
+    const uniqueKey = `${this.state.selectedChoice}_${this.state.preSelectLegends}`;
     return (
       <>
-        <Dropdown
-          label="Select a schema"
-          options={options}
-          onChange={this._onChange}
-          selectedKey={this.state.selectedChoice}
-          styles={dropdownStyles}
-        />
+        <div style={{ display: 'flex' }}>
+          <Dropdown
+            label="Select a schema"
+            options={options}
+            onChange={this._onChange}
+            selectedKey={this.state.selectedChoice}
+            styles={dropdownStyles}
+          />
+          &nbsp;&nbsp;&nbsp;
+          <Toggle
+            label="Pre select legends"
+            onText="ON"
+            offText="OFF"
+            onChange={this._onTogglePreselectLegends}
+            checked={this.state.preSelectLegends}
+          />
+        </div>
         <br />
-        <h2>{this.state.selectedChoice}. {selectedPlotlySchema.layout.title}</h2>
+        <button
+          onClick={() => {
+            this._declarativeChartRef.current?.exportAsImage().then((imgData: string) => {
+              this.fileSaver(imgData);
+            });
+          }}
+        >
+          Download
+        </button>
         <br />
-        <DeclarativeChart chartSchema={inputSchema} />
+        <br />
+        <h2>{this.state.selectedChoice}. {selectedSchema.layout.title}</h2>
+        <br />
+        <br />
+        <DeclarativeChart
+          key={uniqueKey}
+          chartSchema={inputSchema}
+          onSchemaChange={this._handleChartSchemaChanged}
+          componentRef={this._declarativeChartRef}
+        />
+        <br />
+        Legend selection changed : {this.state.selectedLegends}
       </>
     );
   }
-}
+
+  public render(): JSX.Element {
+    return <div>{this._createDeclarativeChart()}</div>;
+  }
+}

apps/plotly_examples/src/custom.d.ts

@@ -0,0 +1,6 @@
+declare const require: {
+    context: (path: string, deep?: boolean, filter?: RegExp) => {
+      keys: () => string[];
+      <T>(id: string): T;
+    };
+  };

apps/plotly_examples/src/data/data_1.json

@@ -0,0 +1,47 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "name": "Product Category",
+      "x": [
+        "2023-01-01",
+        "2023-02-01",
+        "2023-03-01",
+        "2023-04-01",
+        "2023-05-01",
+        "2023-06-01",
+        "2023-07-01",
+        "2023-08-01",
+        "2023-09-01",
+        "2023-10-01",
+        "2023-11-01",
+        "2023-12-01"
+      ],
+      "y": [
+        5000,
+        5200,
+        5400,
+        5600,
+        5800,
+        6000,
+        6200,
+        6400,
+        6600,
+        6800,
+        7000,
+        7200
+      ],
+      "fill": "tozeroy"
+    }
+  ],
+  "layout": {
+    "title": "Monthly Sales Volume Growth",
+    "xaxis": {
+      "title": "Month"
+    },
+    "yaxis": {
+      "title": "Sales Volume"
+    }
+  },
+  "id": 1
+}

apps/plotly_examples/src/data/data_10.json

@@ -0,0 +1,38 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "mode": "lines",
+      "fill": "tozeroy",
+      "x": [
+        "2023-01-01",
+        "2023-01-08",
+        "2023-01-15",
+        "2023-01-22",
+        "2023-01-29",
+        "2023-02-05",
+        "2023-02-12"
+      ],
+      "y": [
+        500,
+        1000,
+        1200,
+        1500,
+        2000,
+        2400,
+        3000
+      ],
+      "name": "Weekly Visits"
+    }
+  ],
+  "layout": {
+    "title": "Overall Growth in Weekly Visits",
+    "xaxis": {
+      "title": "Week"
+    },
+    "yaxis": {
+      "title": "Number of Visits"
+    }
+  },
+  "id": 10
+}