[6.x] Forms 2: Visualize Responses

.storybook/storybook.css

@@ -5,6 +5,7 @@
 @import '../resources/css/ui.css';
 @import '../resources/css/core/utilities.css';
 @import '../resources/css/elements/tables.css';
+@import '../resources/css/components/forms/charts.css';
 @import '../resources/css/components/stacks.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -332,4 +333,4 @@
     .sbdocs-preview {
         border-radius: 17px;
     }
-}
+}

.storybook/theme.css

@@ -31,6 +31,18 @@ manually copy them here.
     --theme-color-ui-accent-bg: oklch(0.457 0.24 277.023);
     --theme-color-ui-accent-text: var(--theme-color-ui-accent-bg);
     --theme-color-switch-bg: var(--theme-color-ui-accent-bg);
+    --theme-color-chart-1: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4: oklch(0.87 0.065 274.039);
+    --theme-color-chart-1-label-bg: oklch(0.511 0.262 276.966);
+    --theme-color-chart-2-label-bg: transparent;
+    --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
+    --theme-color-chart-4-label-bg: oklch(0.673 0.182 276.935);
+    --theme-color-chart-1-legend: oklch(0.585 0.233 277.117);
+    --theme-color-chart-2-legend: oklch(0.274 0.006 286.033);
+    --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+    --theme-color-chart-4-legend: oklch(0.785 0.115 274.713);
 
     --z-index-below: -1;
     --z-index-above: 1;
@@ -45,6 +57,18 @@ manually copy them here.
         --theme-color-content-bg: oklch(0.21 0.006 285.885);
         --theme-color-content-border: oklch(0.141 0.005 285.823);
         --theme-color-ui-accent-text: oklch(0.673 0.182 276.935);
+        --theme-color-chart-1: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2: oklch(0.87 0.065 274.039);
+        --theme-color-chart-3: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4: oklch(0.141 0.005 285.823);
+        --theme-color-chart-1-label-bg: oklch(0.457 0.24 277.023);
+        --theme-color-chart-2-label-bg: oklch(0.673 0.182 276.935);
+        --theme-color-chart-3-label-bg: oklch(0.648 0.2 131.684);
+        --theme-color-chart-4-label-bg: oklch(0.37 0.013 285.805);
+        --theme-color-chart-1-legend: oklch(0.511 0.262 276.966);
+        --theme-color-chart-2-legend: oklch(0.87 0.065 274.039);
+        --theme-color-chart-3-legend: oklch(0.768 0.233 130.85);
+        --theme-color-chart-4-legend: oklch(0.141 0.005 285.823);
     }
 }
 

lang/en/messages.php

@@ -164,6 +164,9 @@
     'form_fields_handle_instructions' => 'Auto-generated from the label. It can\'t be changed after saving the form.',
     'form_fields_instructions_instructions' => 'Additional field instructions like this.',
     'form_navigation' => 'Form navigation',
+    'form_summary_add_chart_instructions' => 'Add a chart to start summarizing responses.',
+    'form_summary_checked_insight' => 'of users checked the toggle',
+    'form_summary_save_to_see_chart' => 'Save to see this chart.',
     'getting_started_widget_collections' => 'Collections hold the different content types that make up your site, helping you stay organized.',
     'getting_started_widget_docs' => 'Discover everything Statamic can do, and learn how to use its powerful features the right way.',
     'getting_started_widget_header' => 'Getting Started with Statamic',

lang/en/validation.php

@@ -173,6 +173,9 @@
     'elevated_session_verification_code' => 'The verification code is incorrect.',
     'email_available' => 'A user with this email already exists.',
     'fieldset_imported_recursively' => 'Fieldset :handle is being imported recursively.',
+    'form_chart_hidden_field' => 'Field :field is hidden and cannot be charted.',
+    'form_chart_unknown_chart' => 'Chart :chart does not exist.',
+    'form_chart_unknown_field' => 'Field :field does not exist on this form.',
     'one_site_without_origin' => 'At least one site must not have an origin.',
     'options_require_keys' => 'All options must have keys.',
     'origin_cannot_be_disabled' => 'Cannot select a disabled origin.',

packages/cms/src/ui.js

@@ -48,6 +48,8 @@ export const {
     Field,
     Header,
     Heading,
+    HorizontalBarChart,
+    HorizontalLollipopChart,
     HoverCard,
     Icon,
     Input,
@@ -78,6 +80,7 @@ export const {
     Panel,
     PanelFooter,
     PanelHeader,
+    PieChart,
     Popover,
     PublishComponents,
     PublishContainer,
@@ -127,6 +130,7 @@ export const {
     Timezones,
     ToggleGroup,
     ToggleItem,
+    VerticalBarChart,
     Widget,
     registerIconSet,
     registerIconSetFromStrings,