include charts types in prompt and render the violin plot in right format

Author: Manishram-ai

backend/tutor_prompts.py

@@ -356,22 +356,42 @@ def get_component_edit_system_prompt(
 Only append a chart tag if the data contains quantitative, plottable numerical values. If the table is purely informational, qualitative, or text-based (e.g., comparing definitions, features, or Yes/No states), generate the Markdown table normally but DO NOT append any chart tag
 
 A.DETERMINE THE BEST CHART TYPE:
-Analyze the data you are about to present and decide the most effective way to visualize it. Choose from: Bar, Pie, Line, Scatter, or Area.
+Analyze the data you are about to present and decide the most effective way to visualize it. Choose from: Bar, Stacked Bar, Pie, Donut, Line, Area, Stacked Area, Scatter, Bubble, Histogram, Box Plot, Radar, Density Plot, Violin Plot, or Candlestick.
 
 B. STRUCTURE THE TABLE FOR THE CHOSEN CHART:
 Format the columns and rows of your Markdown table to match the requirements of the chosen chart type. You are encouraged to use multiple columns for multi-series data, following these rules:
-* Bar Chart (Grouped/Stacked): Column 1 must contain categorical labels (X-axis). Column 2 through Column N must contain numerical values representing different data series.
-* Line / Area Chart (Multi-line): Column 1 must represent a continuous sequence or time series (e.g., Dates, Years, Months). Column 2 through Column N must contain the corresponding numerical values for different data series.
-* Scatter Plot: Column 1 represents the X-axis coordinates. Column 2 represents the Y-axis coordinates for the primary series. Columns 3 through N can represent Y-axis coordinates for additional series, or dimensions like bubble size. All columns must be strictly numerical except for potential data labels.
-* Pie Chart: STRICTLY 2 COLUMNS ONLY. Column 1 must contain categorical labels. Column 2 must contain a SINGLE set of numerical values that represent parts of a whole. Do not include multiple data series.
+* Bar Chart (Grouped): Column 1 must contain categorical labels (X-axis). Column 2 through Column N must contain numerical values representing different data series. Use when comparing discrete categories side-by-side.
+* Stacked Bar Chart: Column 1 must contain categorical labels (X-axis). Column 2 through Column N must contain numerical values for each series that stack to form a total. Use when you want to show both part-to-whole composition AND compare totals across categories.
+* Line / Area Chart (Multi-line): Column 1 must represent a continuous sequence or time series (e.g., Dates, Years, Months). Column 2 through Column N must contain the corresponding numerical values for different data series. Use Area when emphasizing volume or cumulative magnitude over time.
+* Stacked Area Chart: Column 1 must represent a continuous sequence or time series. Column 2 through Column N must contain numerical values for each series. Values stack on top of each other. Use when showing how multiple series contribute to a changing whole over time.
+* Scatter Plot: Column 1 represents the X-axis coordinates. Column 2 represents the Y-axis coordinates for the primary series. Columns 3 through N can represent Y-axis coordinates for additional series. All columns must be strictly numerical. Use when exploring correlation or distribution between two continuous variables.
+* Bubble Chart: Column 1 represents the X-axis coordinates (strictly numerical). Column 2 through Column N represent the Y-axis values for each series (strictly numerical). Bubble radius is derived from the magnitude of the Y value. Use when a third dimension (size) reinforces the Y-axis insight.
+* Pie Chart: STRICTLY 2 COLUMNS ONLY. Column 1 must contain categorical labels. Column 2 must contain a SINGLE set of numerical values that represent parts of a whole. Do not include multiple data series. Use for simple proportional breakdowns with 2–6 categories.
+* Donut Chart: STRICTLY 2 COLUMNS ONLY. Identical structure to Pie Chart — Column 1 contains categorical labels, Column 2 contains a single set of numerical values summing to a whole. Use instead of Pie when you want to emphasize the individual segments over the total, or when a central label would add context.
+* Histogram: STRICTLY 2 COLUMNS ONLY. Column 1 must contain bin/range labels (e.g., "0–10", "10–20"). Column 2 must contain the frequency or count for each bin. Use to show the distribution or shape of a single continuous variable.
+* Box Plot: EXACTLY 6 COLUMNS. Column 1 must contain category labels. Column 2 = Minimum, Column 3 = Q1 (25th percentile), Column 4 = Median (50th percentile), Column 5 = Q3 (75th percentile), Column 6 = Maximum. All value columns must be strictly numerical. Use to compare statistical spread and skew across categories.
+* Radar Chart: Column 1 must contain the dimension/axis labels (e.g., "Speed", "Accuracy", "Recall"). Column 2 through Column N must contain the numerical scores for each entity being compared (one column per entity). Use when comparing multiple entities across 4 or more qualitative dimensions simultaneously.
+* Density Plot: Column 1 must represent a continuous variable or X-axis range (e.g., values, scores). Column 2 through Column N must contain the corresponding density or probability values for one or more distributions. Use to visualize the shape of a probability distribution smoothly.
+* Violin Plot: Column 1 must contain evenly-spaced numerical Y-axis values representing the measurement range (e.g., "20", "30", "40", "50"). Provide 8–12 rows for a smooth curve. Column 2 through Column N must contain the normalized density or relative frequency at each Y value, one column per category being compared. Values should naturally taper toward zero at the top and bottom rows to represent distribution tails. Use to compare the full distribution shape — not just spread — across multiple categories simultaneously.
+* Candlestick Chart: EXACTLY 5 COLUMNS. Column 1 must contain time/date labels (e.g., "Jan", "Feb", "Week 1"). Column 2 = Open, Column 3 = High, Column 4 = Low, Column 5 = Close. All value columns must be strictly numerical. Use exclusively for financial or sequential OHLC (Open-High-Low-Close) data.
 
 C. APPLY THE CHART TAG:
 Immediately underneath the generated Markdown table, you must output a specific tag indicating the chart type. Use exactly one of the following tags on its own line:
 <<bar>>
+<<stacked_bar>>
 <<pie>>
+<<donut>>
 <<line>>
-<<scatter>>
 <<area>>
+<<stacked_area>>
+<<scatter>>
+<<bubble>>
+<<histogram>>
+<<box_plot>>
+<<radar>>
+<<density_plot>>
+<<violin_plot>>
+<<candlestick>>
 
 ### EXAMPLE OUTPUTS ###
 
@@ -384,15 +404,23 @@ def get_component_edit_system_prompt(
 | 2023 | 70000 | 40000 | 60000 |
 <<line>>
 
-Example 2 (Multi-Series Bar Chart - 5 Columns):
+Example 2 (Grouped Bar Chart - 5 Columns):
 | Region | Q1 Sales | Q2 Sales | Q3 Sales | Q4 Sales |
 | :--- | :--- | :--- | :--- | :--- |
 | North America | 120 | 135 | 140 | 160 |
 | Europe | 85 | 90 | 95 | 110 |
 | Asia-Pacific | 150 | 160 | 175 | 200 |
 <<bar>>
 
-Example 3 (Pie Chart - Strictly 2 Columns):
+Example 3 (Stacked Bar Chart - 4 Columns):
+| Department | Salaries | Equipment | Overheads |
+| :--- | :--- | :--- | :--- |
+| Engineering | 500 | 120 | 80 |
+| Marketing | 300 | 40 | 60 |
+| Operations | 200 | 90 | 110 |
+<<stacked_bar>>
+
+Example 4 (Pie Chart - Strictly 2 Columns):
 | Energy Source | Percentage (%) |
 | :--- | :--- |
 | Solar | 45 |
@@ -401,6 +429,99 @@ def get_component_edit_system_prompt(
 | Nuclear | 10 |
 <<pie>>
 
+Example 5 (Donut Chart - Strictly 2 Columns):
+| Browser | Market Share (%) |
+| :--- | :--- |
+| Chrome | 65 |
+| Safari | 19 |
+| Firefox | 4 |
+| Edge | 4 |
+| Other | 8 |
+<<donut>>
+
+Example 6 (Stacked Area Chart - 3 Columns):
+| Year | Renewable Energy (TWh) | Fossil Fuels (TWh) |
+| :--- | :--- | :--- |
+| 2018 | 800 | 4200 |
+| 2019 | 950 | 4100 |
+| 2020 | 1100 | 3900 |
+| 2021 | 1350 | 3700 |
+| 2022 | 1600 | 3400 |
+<<stacked_area>>
+
+Example 7 (Bubble Chart - 3 Columns, size from Y magnitude):
+| GDP per Capita ($) | Life Expectancy (years) | Happiness Score |
+| :--- | :--- | :--- |
+| 8000 | 65 | 4.5 |
+| 22000 | 74 | 6.1 |
+| 45000 | 80 | 7.3 |
+| 62000 | 82 | 7.8 |
+<<bubble>>
+
+Example 8 (Histogram - Strictly 2 Columns):
+| Score Range | Number of Students |
+| :--- | :--- |
+| 0–20 | 3 |
+| 21–40 | 8 |
+| 41–60 | 22 |
+| 61–80 | 35 |
+| 81–100 | 12 |
+<<histogram>>
+
+Example 9 (Box Plot - Exactly 6 Columns):
+| Subject | Min | Q1 | Median | Q3 | Max |
+| :--- | :--- | :--- | :--- | :--- | :--- |
+| Math | 42 | 58 | 72 | 84 | 98 |
+| Science | 50 | 65 | 76 | 88 | 99 |
+| English | 38 | 55 | 68 | 79 | 95 |
+<<box_plot>>
+
+Example 10 (Radar Chart - 4 Columns, 3 dimensions):
+| Attribute | Fighter A | Fighter B | Fighter C |
+| :--- | :--- | :--- | :--- |
+| Speed | 85 | 70 | 90 |
+| Strength | 60 | 95 | 55 |
+| Endurance | 75 | 80 | 65 |
+| Agility | 90 | 60 | 88 |
+| Defense | 50 | 88 | 70 |
+<<radar>>
+
+Example 11 (Density Plot - 3 Columns):
+| Value | Group A Density | Group B Density |
+| :--- | :--- | :--- |
+| 0 | 0.02 | 0.05 |
+| 10 | 0.08 | 0.12 |
+| 20 | 0.18 | 0.22 |
+| 30 | 0.25 | 0.30 |
+| 40 | 0.18 | 0.20 |
+| 50 | 0.08 | 0.08 |
+| 60 | 0.02 | 0.03 |
+<<density_plot>>
+
+Example 12 (Violin Plot - Y-axis density, multi-category):
+| Score | Control | Treatment |
+| :--- | :--- | :--- |
+| 30 | 0.02 | 0.01 |
+| 40 | 0.06 | 0.04 |
+| 50 | 0.15 | 0.08 |
+| 60 | 0.28 | 0.14 |
+| 70 | 0.32 | 0.22 |
+| 80 | 0.22 | 0.30 |
+| 90 | 0.10 | 0.28 |
+| 100 | 0.04 | 0.18 |
+| 110 | 0.01 | 0.08 |
+| 120 | 0.00 | 0.03 |
+<<violin_plot>>
+
+Example 13 (Candlestick Chart - Exactly 5 Columns):
+| Month | Open | High | Low | Close |
+| :--- | :--- | :--- | :--- | :--- |
+| Jan | 142 | 158 | 138 | 155 |
+| Feb | 155 | 162 | 148 | 150 |
+| Mar | 150 | 170 | 145 | 168 |
+| Apr | 168 | 175 | 160 | 163 |
+<<candlestick>>
+
 **When to call update_learner_profile:**
 - Call it proactively when you notice a clear mismatch (don't wait to be asked!)
 - If you ask a clarifying question and the user shares useful context (background, goal, constraints, learning preferences), call it immediately to store that context.

frontend/src/components/app/views/BlockLabView.tsx

@@ -123,8 +123,18 @@ export function BlockLabView() {
   const densBody: string[][] = [["0", "2"], ["1", "8"], ["2", "20"], ["3", "35"], ["4", "28"], ["5", "15"], ["6", "5"], ["7", "2"]]
   const sampleDensity = parseGraphFromTable("density_plot", densHeaders, densBody)
 
-  const violinHeaders = ["Category", "Spread"]
-  const violinBody: string[][] = [["Model A", "40"], ["Model B", "65"], ["Model C", "30"], ["Model D", "55"]]
+  const violinHeaders = ["Score", "Model A", "Model B", "Model C"]
+  const violinBody: string[][] = [
+    ["10", "0.02", "0.01", "0.04"],
+    ["20", "0.06", "0.03", "0.12"],
+    ["30", "0.14", "0.08", "0.25"],
+    ["40", "0.26", "0.18", "0.32"],
+    ["50", "0.32", "0.30", "0.22"],
+    ["60", "0.26", "0.34", "0.10"],
+    ["70", "0.14", "0.28", "0.04"],
+    ["80", "0.06", "0.14", "0.01"],
+    ["90", "0.02", "0.05", "0.00"],
+  ]
   const sampleViolin = parseGraphFromTable("violin_plot", violinHeaders, violinBody)
 
   const errHeaders = ["Trial", "Value", "Error"]

frontend/src/components/block-types/Graph.tsx

@@ -597,32 +597,84 @@ export const GraphBlock = React.memo(function GraphBlock({
 
     if (chart.type === "violin_plot") {
       const labels = chart.labels ?? []
-      if (!labels.length || chart.series.length === 0) return null
-      const values = chart.series[0]?.values ?? []
-      if (!values.length) return null
-      const maxVal = Math.max(1, ...values)
-      const groupW = bounds.width / labels.length
+      if (labels.length < 3 || chart.series.length === 0) return null
+
+      // Column 1 = Y-axis numeric positions (parse from string labels)
+      const yVals: number[] = []
+      for (const l of labels) {
+        const n = parseFloat(l.replace(/[^\d.\-eE]/g, ""))
+        if (!isFinite(n)) return null
+        yVals.push(n)
+      }
+      const yMin = Math.min(...yVals)
+      const yMax = Math.max(...yVals)
+      if (yMin === yMax) return null
+
+      // Sort by Y value so path draws top-to-bottom correctly
+      const order = yVals.map((_, i) => i).sort((a, b) => yVals[a] - yVals[b])
+      const sortedY = order.map(i => yVals[i])
+
+      const slotW = bounds.width / chart.series.length
+      const maxHalfW = slotW * 0.40
+      const yPos = (v: number) => yFromValue(v, bounds, yMin, yMax)
+
       return (
         <>
-          <line x1={bounds.left} y1={bounds.top + bounds.height} x2={bounds.left + bounds.width} y2={bounds.top + bounds.height} stroke={COLORS.borderLight} />
-          {labels.map((label, i) => {
-            const cx = bounds.left + i * groupW + groupW / 2
-            const halfW = (values[i] / maxVal) * (groupW * 0.4)
-            const top = bounds.top + bounds.height * 0.1
-            const mid = bounds.top + bounds.height * 0.5
-            const bot = bounds.top + bounds.height * 0.85
-            const qTop = bounds.top + bounds.height * 0.3
-            const qBot = bounds.top + bounds.height * 0.7
-            const path = `M ${cx} ${top} C ${cx + halfW * 0.3} ${qTop}, ${cx + halfW} ${mid - 20}, ${cx + halfW} ${mid} C ${cx + halfW} ${mid + 20}, ${cx + halfW * 0.3} ${qBot}, ${cx} ${bot} C ${cx - halfW * 0.3} ${qBot}, ${cx - halfW} ${mid + 20}, ${cx - halfW} ${mid} C ${cx - halfW} ${mid - 20}, ${cx - halfW * 0.3} ${qTop}, ${cx} ${top} Z`
+          {Array.from({ length: 5 }, (_, i) => {
+            const y = bounds.top + (bounds.height / 4) * i
+            return <line key={`g-${i}`} x1={bounds.left} y1={y} x2={bounds.left + bounds.width} y2={y} stroke={COLORS.borderLight} strokeWidth={0.5} />
+          })}
+          <line x1={bounds.left} y1={bounds.top} x2={bounds.left} y2={bounds.top + bounds.height} stroke={COLORS.borderMedium} strokeWidth={1} />
+          {chart.series.map((series, sIdx) => {
+            const cx = bounds.left + sIdx * slotW + slotW / 2
+            const rawValues = order.map(i => series.values[i] ?? 0)
+            const maxDensity = Math.max(1e-9, ...rawValues)
+            const pts = sortedY.map((_, i) => ({
+              y: yPos(sortedY[i]),
+              hw: (rawValues[i] / maxDensity) * maxHalfW,
+            }))
+
+            // Smooth closed path: taper to cx at top and bottom, cubic bezier sides
+            let d = `M ${cx} ${pts[0].y}`
+            for (let i = 0; i < pts.length; i++) {
+              if (i === 0) {
+                d += ` L ${cx + pts[i].hw} ${pts[i].y}`
+              } else {
+                const p0 = pts[i - 1], p1 = pts[i]
+                const midY = (p0.y + p1.y) / 2
+                d += ` C ${cx + p0.hw} ${midY} ${cx + p1.hw} ${midY} ${cx + p1.hw} ${p1.y}`
+              }
+            }
+            d += ` L ${cx} ${pts[pts.length - 1].y}`
+            for (let i = pts.length - 1; i >= 0; i--) {
+              if (i === pts.length - 1) {
+                d += ` L ${cx - pts[i].hw} ${pts[i].y}`
+              } else {
+                const p0 = pts[i + 1], p1 = pts[i]
+                const midY = (p0.y + p1.y) / 2
+                d += ` C ${cx - p0.hw} ${midY} ${cx - p1.hw} ${midY} ${cx - p1.hw} ${p1.y}`
+              }
+            }
+            d += " Z"
+
+            const midIdx = Math.floor(pts.length / 2)
+            const { y: medY, hw: medHW } = pts[midIdx]
             return (
-              <g key={`vio-${i}`}>
-                <path d={path} fill={colors[0]} fillOpacity={0.3} stroke={colors[0]} strokeWidth={1.5} />
-                <line x1={cx} y1={top} x2={cx} y2={bot} stroke={colors[0]} strokeWidth={1} strokeDasharray="3,3" />
-                <circle cx={cx} cy={mid} r={3} fill={colors[0]} />
-                <text x={cx} y={height - 14} textAnchor="middle" style={{ fontFamily: FONTS.sans, fontSize: "11px", fill: COLORS.textTertiary }}>{label}</text>
+              <g key={`v-${sIdx}`}>
+                <path d={d} fill={colors[sIdx]} fillOpacity={0.3} stroke={colors[sIdx]} strokeWidth={1.5} />
+                <line x1={cx - medHW} y1={medY} x2={cx + medHW} y2={medY} stroke={colors[sIdx]} strokeWidth={2} />
+                <circle cx={cx} cy={medY} r={3} fill={COLORS.bg} stroke={colors[sIdx]} strokeWidth={2} />
+                <text x={cx} y={height - 14} textAnchor="middle" style={{ fontFamily: FONTS.sans, fontSize: "11px", fill: COLORS.textTertiary }}>
+                  {series.name}
+                </text>
               </g>
             )
           })}
+          {[yMin, (yMin + yMax) / 2, yMax].map((val, i) => (
+            <text key={`yl-${i}`} x={bounds.left - 6} y={yPos(val)} textAnchor="end" dominantBaseline="middle" style={{ fontFamily: FONTS.sans, fontSize: "10px", fill: COLORS.textTertiary }}>
+              {Number.isInteger(val) ? val : val.toFixed(1)}
+            </text>
+          ))}
         </>
       )
     }