Splitting data, adding prompts and scripts

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,49 +1,49 @@
 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
 
 interface IDeclarativeChartState {
   selectedChoice: string;
+  selectedSchema: any;
+  schemasData: any[];
 }
 
-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> {
   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,
     };
   }
 
-  public render(): JSX.Element {
-    return <div>{this._createDeclarativeChart()}</div>;
-  }
-
   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 });
   };
 
-  private _getSchemaByKey(key: string): any {
-    const schema = schemasData.find((x: any) => x.id.toString() === key);
-    return schema ? schema : null;
-  }
-
   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 };
+    const inputSchema: Schema = { plotlySchema: selectedSchema };
     console.log(inputSchema);
     return (
       <>
@@ -55,10 +55,14 @@ export class DeclarativeChartBasicExample extends React.Component<{}, IDeclarati
           styles={dropdownStyles}
         />
         <br />
-        <h2>{this.state.selectedChoice}. {selectedPlotlySchema.layout.title}</h2>
+        <h2>{this.state.selectedChoice}. {selectedSchema.layout.title}</h2>
         <br />
         <DeclarativeChart chartSchema={inputSchema} />
       </>
     );
   }
-}
+
+  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
+}

apps/plotly_examples/src/data/data_11.json

@@ -0,0 +1,106 @@
+{
+  "data": [
+    {
+      "type": "scatter",
+      "mode": "lines",
+      "x": [
+        "2023-01-01",
+        "2023-01-08",
+        "2023-01-15",
+        "2023-01-22",
+        "2023-01-29",
+        "2023-02-05",
+        "2023-02-12"
+      ],
+      "y": [
+        300,
+        400,
+        500,
+        600,
+        700,
+        800,
+        900
+      ],
+      "name": "Organic"
+    },
+    {
+      "type": "scatter",
+      "mode": "lines",
+      "x": [
+        "2023-01-01",
+        "2023-01-08",
+        "2023-01-15",
+        "2023-01-22",
+        "2023-01-29",
+        "2023-02-05",
+        "2023-02-12"
+      ],
+      "y": [
+        100,
+        150,
+        200,
+        220,
+        250,
+        300,
+        350
+      ],
+      "name": "Direct"
+    },
+    {
+      "type": "scatter",
+      "mode": "lines",
+      "x": [
+        "2023-01-01",
+        "2023-01-08",
+        "2023-01-15",
+        "2023-01-22",
+        "2023-01-29",
+        "2023-02-05",
+        "2023-02-12"
+      ],
+      "y": [
+        50,
+        100,
+        150,
+        180,
+        200,
+        220,
+        250
+      ],
+      "name": "Referral"
+    },
+    {
+      "type": "scatter",
+      "mode": "lines",
+      "x": [
+        "2023-01-01",
+        "2023-01-08",
+        "2023-01-15",
+        "2023-01-22",
+        "2023-01-29",
+        "2023-02-05",
+        "2023-02-12"
+      ],
+      "y": [
+        50,
+        75,
+        100,
+        120,
+        150,
+        180,
+        200
+      ],
+      "name": "Social"
+    }
+  ],
+  "layout": {
+    "title": "Traffic Trends Over Weeks by Source",
+    "xaxis": {
+      "title": "Week"
+    },
+    "yaxis": {
+      "title": "Number of Visits"
+    }
+  },
+  "id": 11
+}

apps/plotly_examples/src/data/data_12.json

@@ -0,0 +1,24 @@
+{
+  "data": [
+    {
+      "type": "pie",
+      "labels": [
+        "Organic",
+        "Direct",
+        "Referral",
+        "Social"
+      ],
+      "values": [
+        900,
+        350,
+        250,
+        200
+      ],
+      "hole": 0.4
+    }
+  ],
+  "layout": {
+    "title": "Traffic Sources Breakdown for the Week of 2023-02-12"
+  },
+  "id": 12
+}