<%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm"}) do %>
<%= pb_rails("layout/sidebar") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center", padding: "md"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "Design Expo", tag: "h2", size: 3 }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("body", props: {
text: "Annual Conference*",
color: "light"
}) %>
<% end %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("flex", props: {orientation: "column", padding: "md"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "Regions", tag: "h4", size: 4, padding_bottom: "sm" }) %>
<% end %>
<%= pb_rails("flex", props: {orientation: "column"}) do %>
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
<%= pb_rails("checkbox" , props: {
text: "North America",
value: "checkbox-value",
checked: true,
name: "checkbox-name",
padding_left: "sm",
padding_bottom: "sm"
}) %>
<% end %>
<%= pb_rails("body", props: {classname: "flex-item"}) do %>
<%= pb_rails("checkbox" , props: {
text: "Europe",
value: "checkbox-value",
checked: true,
name: "checkbox-name",
padding_left: "sm",
padding_bottom: "sm"
}) %>
<% end %>
<% end %>
<%= pb_rails("title", props: { text: "Total Registered", tag: "h4", size: 4, padding_y: "sm" }) %>
<%= pb_rails("table", props: { size: "sm", disable_hover: true, padding_bottom: "xs" }) do %>
| Conference |
Total # |
| 2020 | SF |
2,391 |
| 2020 | TOR |
3,829 |
| 2019 | AMS |
2,047 |
| 2018 | SF |
1,824 |
| 2017 | LA |
719 |
| 2017 | LDN |
491 |
<% end %>
<%= pb_rails("caption", props: { text: "*This dashboard includes the last six conferences", size: 'xs' }) %>
<% end %>
<% end %>
<%= pb_rails("layout/body", props: { padding: "xl" }) do %>
<%= pb_rails("title", props: { text: "Registration Dashboard", tag: "h1", size: 3, padding_bottom: "lg" }) %>
<%= pb_rails("flex") do %>
<%= pb_rails("flex/flex_item", props: {fixed_size: "60%", padding_right: "lg"}) do %>
<%= pb_rails("card") do %>
<%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_bottom: "md"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "2020 | SF", size: "xs" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Total Registered" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "2,391", tag: "h3", size: 2 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Graphic" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "353", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "UX/UI" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "254", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Product" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "194", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("flex", props: {vertical: "bottom", spacing: "around", padding_top: "sm"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "2020 | TOR", size: "xs" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Total Registered" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "3,829", tag: "h3", size: 2 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("section_separator", props: { orientation: "vertical" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Graphic" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "937", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "UX/UI" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "721", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "center"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: "Product" }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "628", tag: "h3", size: 3 }) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex", props: {orientation: "column", horizontal: "right", padding_bottom: "md"}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("button", props: { text: "View full breakdown", variant: "link" }) %>
<% end %>
<% end %>
<%= pb_rails("card") do %>
<% data = [{
name: '2020 | SF',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '2020 | TOR',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '2019 | AMS',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '2018 | SF',
data: [nil, nil, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '2017 | LA',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}] %>
<%= pb_rails("line_graph", props: {
id: "line-registration",
gradient: false,
chart_data: data,
x_axis_categories:['7 wks away','6 wks away','5 wks away','4 wks away','3 wks away','2 wks away','1 wk away','Start of event'],
title: 'Running Total',
axis_title: 'Total Registration',
legend: true,
height: '80%'
}) %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item", props: {fixed_size: "40%"}) do %>
<%= pb_rails("card") do %>
<% total = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'Total Registered',
chart_data: total,
id: "total-attendees",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% new_attendees = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'New Attendees',
chart_data: new_attendees,
id: "new-attendees",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% repeating_attendees = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'Repeating Attendees',
chart_data: repeating_attendees,
id: "repeating-attendees",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% graphic_designers = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'Graphic Designers',
chart_data: graphic_designers,
id: "graphic-designers",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% ux_ui = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'UX/UI',
chart_data: ux_ui,
id: "ux-ui",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% product_designers = [{
name: 'Registrations',
data: [1475, 524, 1344, 780, 200, 900]
}] %>
<%= pb_rails("bar_graph", props: {
axis_title: 'Product Designers',
chart_data: product_designers,
id: "product-designers",
y_axis_min: 0,
x_axis_categories:['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF'],
height: '30%'
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>