glib-web 4.42.1 → 4.42.3

data/app/views/json_ui/garage/test_page/charts.json.jbuilder

@@ -0,0 +1,370 @@
+json.title 'Test Page (Charts)'
+
+default_plugins = {
+  datalabels: {
+    backgroundColor: 'skyblue',
+    borderRadius: 4,
+    color: 'white',
+    font: {
+      weight: 'bold'
+    },
+    padding: 6
+  }
+}
+
+line_series_revenue = [
+  -> do
+    json.title 'Revenue'
+
+    points = {
+      'Jan' => 120,
+      'Feb' => 80,
+      'Mar' => 140,
+      'Apr' => 110,
+    }
+    json.points points.map { |k, v| { x: k, y: v, label: v } }
+  end,
+  -> do
+    json.title 'Orders'
+
+    points = {
+      'Jan' => 30,
+      'Feb' => 45,
+      'Mar' => 40,
+      'Apr' => 60,
+    }
+    json.points points.map { |k, v| { x: k, y: v, label: v } }
+  end
+]
+
+line_series_sessions = [
+  -> do
+    json.title 'Sessions'
+
+    points = {
+      'Mon' => 60,
+      'Tue' => 72,
+      'Wed' => 68,
+      'Thu' => 90,
+      'Fri' => 120,
+    }
+    json.points points.map { |k, v| { x: k, y: v, label: v } }
+  end
+]
+
+line_series_churn = [
+  -> do
+    json.title 'Churn'
+
+    points = {
+      'Q1' => 4,
+      'Q2' => 6,
+      'Q3' => 5,
+      'Q4' => 3,
+    }
+    json.points points.map { |k, v| { x: k, y: v, label: v } }
+  end
+]
+
+page = json_ui_page json
+
+page.body childViews: ->(body) do
+  render 'json_ui/garage/test_page/header', view: body
+
+  body.panels_responsive padding: glib_json_padding_body, childViews: ->(res) do
+    res.h2 text: 'Charts'
+    res.label text: 'Visualize trends, comparisons, and composition with line, column, pie, donut, and area charts.'
+    res.spacer height: 12
+    res.hr width: 'matchParent'
+    res.spacer height: 12
+
+    res.h2 text: 'Interactive preview'
+    res.label text: 'Swap data sets to confirm the chart updates without remounting.'
+    res.spacer height: 8
+    # res.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(flow) do
+    #   flow.button(
+    #     text: 'Revenue vs Orders',
+    #     onClick: ->(action) do
+    #       action.components_set(
+    #         targetId: 'charts_preview',
+    #         data: {
+    #           dataSeries: line_series_revenue,
+    #           plugins: default_plugins,
+    #           colors: ['#79AC78', '#3085C3'],
+    #           legend: { display: false },
+    #           formatYAxis: true
+    #         }
+    #       )
+    #     end
+    #   )
+    #   flow.spacer width: 8
+    #   flow.button(
+    #     text: 'Sessions (single)',
+    #     onClick: ->(action) do
+    #       action.components_set(
+    #         targetId: 'charts_preview',
+    #         data: {
+    #           dataSeries: line_series_sessions,
+    #           colors: ['#E36414'],
+    #           legend: { display: false },
+    #           formatYAxis: true
+    #         }
+    #       )
+    #     end
+    #   )
+    #   flow.spacer width: 8
+    #   flow.button(
+    #     text: 'Churn trend',
+    #     onClick: ->(action) do
+    #       action.components_set(
+    #         targetId: 'charts_preview',
+    #         data: {
+    #           dataSeries: line_series_churn,
+    #           colors: ['#5B0888'],
+    #           legend: { display: false },
+    #           formatYAxis: true
+    #         }
+    #       )
+    #     end
+    #   )
+    #   flow.spacer width: 8
+    #   flow.button(
+    #     text: 'Clear data',
+    #     onClick: ->(action) do
+    #       action.components_set(
+    #         targetId: 'charts_preview',
+    #         data: { dataSeries: [] }
+    #       )
+    #     end
+    #   )
+    # end
+    res.spacer height: 12
+    res.charts_line(
+      id: 'charts_preview',
+      dataSeries: line_series_revenue,
+      plugins: default_plugins,
+      colors: ['#79AC78', '#3085C3'],
+      legend: { display: false },
+      formatYAxis: true
+    )
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.h2 text: 'Line charts'
+    res.label text: 'Use line charts for time-series trends and comparisons.'
+    res.spacer height: 8
+    res.charts_line(
+      dataSeries: line_series_revenue,
+      plugins: default_plugins,
+      colors: ['#79AC78', '#3085C3'],
+      legend: { display: false },
+      formatYAxis: true
+    )
+
+    res.spacer height: 12
+    res.charts_line \
+      plugins: { customTooltip: true },
+      colors: ['#3085C3'],
+      legend: { display: false },
+      dataSeries: [
+        -> do
+          json.title 'Delta'
+
+          points = {
+            'Jan' => 100,
+            'Feb' => 78,
+            'Mar' => 70,
+            'Apr' => 62,
+          }
+
+          prev = nil
+          json.points do
+            points.each do |k, v|
+              diff = prev.nil? ? 0 : v - prev
+              direction = diff >= 0 ? 'up' : 'down'
+              json.child! do
+                json.x k
+                json.y v
+                json.tooltip do
+                  json.childViews do
+                    res.panels_responsive \
+                      padding: { top: 8, right: 8, left: 8, bottom: 8 },
+                      backgroundColor: '#EDE4E3',
+                      styleClasses: ['rounded-corner'],
+                      childViews: ->(tooltip) do
+                        tooltip.label text: "Month #{k}", color: '#6C6A61'
+                        tooltip.spacer height: 4
+                        tooltip.label text: "Delta #{direction} #{diff.abs}", color: '#6C6A61'
+                      end
+                  end
+                end
+              end
+              prev = v
+            end
+          end
+        end
+      ]
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.h2 text: 'Column charts'
+    res.label text: 'Column charts compare categories or stacked totals.'
+    res.spacer height: 8
+    res.charts_column(
+      dataGroups: [
+        -> do
+          json.title 'Series A'
+
+          points = {
+            '2019' => 10,
+            '2020' => 16,
+            '2021' => 22,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Series B'
+
+          points = {
+            '2019' => 24,
+            '2020' => 22,
+            '2021' => 18,
+          }
+          json.points points
+        end
+      ],
+      plugins: default_plugins,
+      colors: ['#7A71F4', '#53B3E4'],
+      legend: { override: true }
+    )
+
+    res.spacer height: 12
+    res.charts_column \
+      horizontal: true,
+      stacked: true,
+      dataGroups: [
+        -> do
+          json.title 'Hotels'
+
+          points = {
+            'Hotel One' => 10,
+            'Hotel Two' => 16,
+            'Hotel Three' => 18,
+          }
+          json.points points
+        end,
+        -> do
+          json.title 'Resorts'
+
+          points = {
+            'Hotel One' => 24,
+            'Hotel Two' => 22,
+            'Hotel Three' => 12,
+          }
+          json.points points
+        end
+      ],
+      colors: ['#7A71F4', '#53B3E4'],
+      legend: { override: true }
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    plugins = default_plugins.deep_dup
+    plugins[:datalabels][:formatType] = 'label'
+    res.h2 text: 'Pie and donut charts'
+    res.label text: 'Pie and donut charts show composition for a small set of categories.'
+    res.spacer height: 8
+    res.charts_pie \
+      colors: ['#FC5A8D', '#F5E216'],
+      plugins: plugins,
+      dataPoints: [
+        { title: 'Strawberry', value: 25, label: 'Strawberry' },
+        { title: 'Banana', value: 75, label: 'Banana' }
+      ],
+      legend: { display: false }
+
+    res.spacer height: 12
+    res.charts_pie \
+      styleClasses: ['donut'],
+      suffix: '%',
+      colors: ['#FC5A8D', '#F5E216'],
+      plugins: default_plugins.merge({
+        centerLabel: {
+          labels: [
+            {
+              text: 'Fruits',
+              font: {
+                weight: 'bold',
+                size: 20
+              }
+            },
+            { text: 'You like' }
+          ]
+        }
+      }),
+      dataPoints: [
+        { title: 'Strawberry', value: 25 },
+        { title: 'Banana', value: 75 }
+      ],
+      legend: { position: 'right', override: true }
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.h2 text: 'Area chart'
+    res.label text: 'Area charts emphasize volume across time.'
+    res.spacer height: 8
+    res.charts_area \
+      dataPoints: [
+        { title: 'Jan', value: 25 },
+        { title: 'Feb', value: 55 },
+        { title: 'Mar', value: 60 },
+        { title: 'Apr', value: 45 }
+      ],
+      colors: ['#5B0888']
+
+    res.spacer height: 16
+    res.hr width: 'matchParent'
+    res.spacer height: 16
+
+    res.h2 text: 'Edge cases'
+    res.label text: 'Confirm empty and zero-value inputs render without errors.'
+    res.spacer height: 8
+    res.label text: 'Empty line chart'
+    res.spacer height: 6
+    res.charts_line dataSeries: [], legend: { display: false }
+
+    res.spacer height: 12
+    res.label text: 'Zero-value pie chart'
+    res.spacer height: 6
+    res.charts_pie \
+      colors: ['#999999', '#CCCCCC'],
+      dataPoints: [
+        { title: 'Zero A', value: 0 },
+        { title: 'Zero B', value: 0 }
+      ],
+      legend: { display: false }
+
+    # res.spacer height: 16
+    # res.hr width: 'matchParent'
+    # res.spacer height: 16
+
+    # res.h2 text: 'Actions'
+    # res.spacer height: 8
+    # res.panels_flow innerPadding: { bottom: 0 }, width: 'matchParent', childViews: ->(flow) do
+    #   flow.button(
+    #     text: 'Open full charts demo',
+    #     onClick: ->(action) do
+    #       action.windows_open url: json_ui_garage_url(path: 'views/charts')
+    #     end
+    #   )
+    # end
+  end
+end

data/app/views/json_ui/garage/test_page/column.json.jbuilder

@@ -0,0 +1,121 @@
+json.title 'Test Page (Column)'
+
+page = json_ui_page json
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Overview'
+        res.p text: 'Column panels define sizing, ordering, and padding within responsive grids.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Basic'
+        res.spacer height: 8
+        res.panels_responsive(
+          width: 'matchParent',
+          childViews: ->(grid) do
+            grid.panels_column(
+              id: 'column_main',
+              lg: { cols: 6 },
+              xs: { cols: 12 },
+              childViews: ->(col) do
+                col.label text: 'Resizable column'
+              end
+            )
+            grid.panels_column(
+              lg: { cols: 6 },
+              xs: { cols: 12 },
+              childViews: ->(col) do
+                col.label text: 'Static column'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Variants and Props'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          childViews: ->(flow) do
+            flow.button(
+              text: '6 cols',
+              onClick: ->(action) do
+                action.snackbars_alert message: 'Not implemented yet!'
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: '4 cols',
+              onClick: ->(action) do
+                action.snackbars_alert message: 'Not implemented yet!'
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Add padding',
+              onClick: ->(action) do
+                action.components_set targetId: 'column_main', data: { padding: { all: 12 } }
+              end
+            )
+            flow.spacer width: 4
+            flow.button(
+              text: 'Clear padding',
+              onClick: ->(action) do
+                action.components_set targetId: 'column_main', data: { padding: nil }
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Actions and Events'
+        res.spacer height: 8
+        res.label id: 'column_action_status', text: 'Click status: idle'
+        res.spacer height: 6
+        res.panels_responsive(
+          width: 'matchParent',
+          childViews: ->(grid) do
+            grid.panels_column(
+              lg: { cols: 12 },
+              onClick: ->(action) do
+                action.components_set targetId: 'column_action_status', data: { text: 'Click status: clicked' }
+              end,
+              styleClasses: ['card'],
+              padding: { all: 8 },
+              childViews: ->(col) do
+                col.label text: 'Click this column'
+              end
+            )
+          end
+        )
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.h2 text: 'Edge and Advanced'
+        res.spacer height: 8
+        res.label text: 'Hidden on extra small screens'
+        res.panels_responsive(
+          width: 'matchParent',
+          childViews: ->(grid) do
+            grid.panels_column(
+              xsOnly: { hide: true },
+              sm: { cols: 6 },
+              childViews: ->(col) do
+                col.label text: 'Hidden on xs'
+              end
+            )
+            grid.panels_column(
+              sm: { cols: 6 },
+              childViews: ->(col) do
+                col.label text: 'Always visible'
+              end
+            )
+          end
+        )
+      end
+    )
+  end
+)

data/app/views/json_ui/garage/test_page/commands.json.jbuilder

@@ -0,0 +1,98 @@
+json.title 'Test Page (Commands)'
+
+page = json_ui_page json
+
+page.body(
+  childViews: ->(body) do
+    render 'json_ui/garage/test_page/header', view: body
+    body.panels_responsive(
+      padding: glib_json_padding_body,
+      childViews: ->(res) do
+        res.h2 text: 'Commands'
+        res.label text: 'Clipboard and command actions.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Overview'
+        res.label text: 'Use command actions to copy values into the system clipboard.'
+        res.spacer height: 12
+        res.hr width: 'matchParent'
+        res.spacer height: 12
+
+        res.h2 text: 'Basic example'
+        res.spacer height: 8
+        res.button(
+          text: 'commands/copy',
+          onClick: ->(action) do
+            action.commands_copy text: 'Paste this somewhere else'
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Variants/props'
+        res.spacer height: 8
+        res.panels_flow(
+          innerPadding: { bottom: 0 },
+          width: 'matchParent',
+          childViews: ->(flow) do
+            flow.button(
+              text: 'commands/copy (short)',
+              onClick: ->(action) do
+                action.commands_copy text: 'Copied from commands test page'
+              end
+            )
+            flow.spacer width: 8
+            flow.button(
+              text: 'commands/copy (long)',
+              onClick: ->(action) do
+                action.commands_copy text: 'Long text: Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Actions/events'
+        res.spacer height: 8
+        res.label id: 'commands_status', text: 'Status: idle'
+        res.spacer height: 8
+        res.button(
+          text: 'commands/copy (with onCopy)',
+          onClick: ->(action) do
+            action.commands_copy(
+              text: 'Copied with callback',
+              onCopy: ->(subaction) do
+                subaction.runMultiple(
+                  childActions: ->(ssaction) do
+                    ssaction.logics_set targetId: 'commands_status', data: { text: 'Status: copied' }
+                    ssaction.snackbars_alert message: 'Copied', styleClass: 'success'
+                  end
+                )
+              end
+            )
+          end
+        )
+
+        res.spacer height: 16
+        res.hr width: 'matchParent'
+        res.spacer height: 16
+
+        res.h2 text: 'Edge/advanced'
+        res.spacer height: 8
+        res.button(
+          text: 'commands/copy (multiline)',
+          onClick: ->(action) do
+            action.commands_copy text: "Line 1\nLine 2\nLine 3"
+          end
+        )
+      end
+    )
+  end
+)