Copy to Clipboard
<%
performance_legend = [
{ title: "Revenue", change: "increase", value: 26.0 },
{ title: "Orders", change: "decrease", value: 2.0 },
{ title: "Profit", change: "increase", value: 5.0 },
{ title: "Average Check", change: "", value: 0.0 },
{ title: "Canceled", change: "decrease", value: 18.0 },
{ title: "Repeat Sales", change: "", value: 0.0 },
]
pipeline_data = [
{ label: "Add to Cart", percent: 100.0, value: 2577 },
{ label: "Shopping Cart", percent: 79.0, value: 2023 },
{ label: "Payment Methods", percent: 59.0, value: 1567 },
{ label: "Delivery Methods", percent: 56.0, value: 1252 },
{ label: "Confirm", percent: 49.0, value: 1182 },
{ label: "Delivery", percent: 46.0, value: 1098 },
]
ticket_data = [
{ icon: "ticket-alt", variant: "green", size: "lg", text: "Tickets (YTD)", value: 1426.0 },
{ icon: "times-square", variant: "red", size: "lg", text: "Overdue", value: 25.0 },
{ icon: "tasks", variant: "teal", size: "lg", text: "Closed Without Action (YTD)", value: 97.0 },
{ icon: "exclamation-triangle", variant: "yellow", size: "lg", text: "Escalated (YTD)", value: 896.0 },
]
total_revenue_green = {
color: "green",
data: [{
name: "Total Sales",
value: 80,
}],
prices: [
{ amount: "1000", name: "Target" },
{ amount: "224", name: "Last Week" },
{ amount: "965", name: "Last Month" }
]
}
bar_graph = {
legend: [
{ value: 1000, label: "Target" },
{ value: 543, label: "Last Week" },
],
data: [{
name: "Sales Report",
data: [343, 135, 665, 903, 571, 191, 173, 520, 917]
}]
}
grid_data = [
{ title: "New Clients", value: 35, percent: 11.0, status: "negative" },
{ title: "Returning Clients", value: 8, percent: 5.0, status: "positive" },
{ title: "VIP Clients", value: 1, percent: 11.0, status: "negative" },
{ title: "Orders on Clients", value: 1.44, percent: 5.0, status: "positive" },
{ title: "Bounce on Clients", value: 30.77, unit: "%", percent: 5.0, status: "positive" },
{ title: "Days Between Orders", value: 3, percent: 0.0, unit: "days" },
{ title: "New Orders", value: 26, percent: 11.0, status: "negative" },
{ title: "Confirmed Orders", value: 15, percent: 11.0, status: "negative" },
]
def sign(data)
data.key?(:status) ? ( data[:status] == "positive" ? "+" : "-" ) : ""
end
%>
<%# Completion Chart %>
<%= pb_rails("card", props: { padding: "none", border_none: true, shadow: "deeper",margin: "sm" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Pipeline Chart", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<% pipeline_data.each do |info| %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between", padding: "sm"}) do %>
<%= pb_rails("flex/flex_item", props: {fixed_size: "100px"}) do %>
<%= pb_rails("caption", props: { text: info[:label], size: 'xs' }) %>
<% end %>
<%= pb_rails("flex/flex_item", props: {grow:true}) do %>
<%= pb_rails("flex", props: {vertical: "center", spacing: "around"}) do %>
<%= pb_rails("progress_simple", props: { width: "100px",percent: info[:percent] }) %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { margin_left: "xs", text: "#{info[:percent]}%", size: 'xs' }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("body", props: {text: "#{info[:value]}"}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<%# Grid %>
<%= pb_rails("card", props: { border_none: true, shadow: "deeper",padding:"none", margin: "sm"}) do %>
<div class="gridone">
<% ticket_data.each do |ticket|%>
<%= pb_rails("background", props: { background_color: "white", padding: "md"}) do %>
<%= pb_rails("flex", props: {horizontal: "left", vertical: "center"}) do %>
<%= pb_rails("flex/flex_item",props:{fixed_size: "215px"}) do %>
<%= pb_rails("icon_stat_value", props: ticket ) %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<%# Bar Graph with Legend %>
<%= pb_rails("card", props: { padding: "none", margin: "sm", border_none: true, shadow: "deeper" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Total Revenue", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { padding_top: "sm" }) do %>
<%= pb_rails("bar_graph", props: {
chart_data: bar_graph[:data],
id: "bar-default",
y_axis_min: 0,
x_axis_categories:[],
height: "75%",
}) %>
<% end %>
<%= pb_rails("section_separator", props: { margin_y: "md" }) %>
<%= pb_rails("card/card_body") do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: { classname: "flex-container", spacing: "between", horizontal: "center", margin: "xs", wrap: true }) do %>
<% bar_graph[:legend].each do |price| %>
<%= pb_rails("flex/flex_item", props: { margin_x: "xl" }) do %>
<%= pb_rails("currency", props: {
amount: price[:value].to_s,
label: price[:label],
emphasized: false,
margin_bottom: "md",
size: "md",
symbol: "$",
variant: "light",
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%# Number Grid %>
<%= pb_rails("card", props: { border_none: true, shadow: "deeper", margin:"sm", padding:"none" }) do %>
<div class="gridtwo">
<% grid_data.each do |data| %>
<%= pb_rails("background", props: { background_color: "white", padding: "md"}) do %>
<%= pb_rails("flex", props: { orientation: "column", wrap: true}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: data[:title] }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex") do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "#{data[:value]}#{data.key?(:unit) ? " " + data[:unit] : "" }", tag: "h3", size: 3 }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("body", props: { text: "#{sign(data)}#{data[:percent].to_i}%", status: data.key?(:status) ? data[:status] : nil, value: data[:percent], margin_left: "xs" }) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<%# Gauge With Legend %>
<%= pb_rails("card", props: { padding: "none", border_none: true, shadow: "deeper", margin: "sm" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Total Revenue", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { margin_top: "sm" }) do %>
<%= pb_rails("flex", props: {orientation: "column", vertical: "center", horizontal: "center"}) do %>
<%= pb_rails("gauge", props: {
id: "full-circle",
chart_data: total_revenue_green[:data],
full_circle: true,
}) %>
<%= pb_rails("caption", props: { text: "Total sales made today" }) %>
<% end %>
<% end %>
<%= pb_rails("section_separator", props: { margin_y: "md" }) %>
<%= pb_rails("card/card_body", props: { padding: "none" }) do %>
<%= pb_rails("flex", props: { classname: "flex-container", spacing: "between", horizontal: "center", margin: "xs", wrap: true }) do %>
<% total_revenue_green[:prices].each do |price| %>
<%= pb_rails("flex/flex_item", props: { margin: "sm" }) do %>
<%= pb_rails("currency", props: {
amount: price[:amount],
label: price[:name],
margin_bottom: "md",
size: "md",
symbol: "$",
variant: "light",
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<style>
[class^=grid]{
display: grid;
gap: 1px;
background-color: #e4e8f0; /* $border_light */
grid-template: auto auto / auto auto;
}
.gridtwo{
grid-template: repeat(2,auto) / repeat(4,1fr);
}
</style>
<%
performance_legend = [
{ title: "Revenue", change: "increase", value: 26.0 },
{ title: "Orders", change: "decrease", value: 2.0 },
{ title: "Profit", change: "increase", value: 5.0 },
{ title: "Average Check", change: "", value: 0.0 },
{ title: "Canceled", change: "decrease", value: 18.0 },
{ title: "Repeat Sales", change: "", value: 0.0 },
]
pipeline_data = [
{ label: "Add to Cart", percent: 100.0, value: 2577 },
{ label: "Shopping Cart", percent: 79.0, value: 2023 },
{ label: "Payment Methods", percent: 59.0, value: 1567 },
{ label: "Delivery Methods", percent: 56.0, value: 1252 },
{ label: "Confirm", percent: 49.0, value: 1182 },
{ label: "Delivery", percent: 46.0, value: 1098 },
]
ticket_data = [
{ icon: "ticket-alt", variant: "green", size: "lg", text: "Tickets (YTD)", value: 1426.0 },
{ icon: "times-square", variant: "red", size: "lg", text: "Overdue", value: 25.0 },
{ icon: "tasks", variant: "teal", size: "lg", text: "Closed Without Action (YTD)", value: 97.0 },
{ icon: "exclamation-triangle", variant: "yellow", size: "lg", text: "Escalated (YTD)", value: 896.0 },
]
total_revenue_green = {
color: "green",
data: [{
name: "Total Sales",
value: 80,
}],
prices: [
{ amount: "1000", name: "Target" },
{ amount: "224", name: "Last Week" },
{ amount: "965", name: "Last Month" }
]
}
bar_graph = {
legend: [
{ value: 1000, label: "Target" },
{ value: 543, label: "Last Week" },
],
data: [{
name: "Sales Report",
data: [343, 135, 665, 903, 571, 191, 173, 520, 917]
}]
}
grid_data = [
{ title: "New Clients", value: 35, percent: 11.0, status: "negative" },
{ title: "Returning Clients", value: 8, percent: 5.0, status: "positive" },
{ title: "VIP Clients", value: 1, percent: 11.0, status: "negative" },
{ title: "Orders on Clients", value: 1.44, percent: 5.0, status: "positive" },
{ title: "Bounce on Clients", value: 30.77, unit: "%", percent: 5.0, status: "positive" },
{ title: "Days Between Orders", value: 3, percent: 0.0, unit: "days" },
{ title: "New Orders", value: 26, percent: 11.0, status: "negative" },
{ title: "Confirmed Orders", value: 15, percent: 11.0, status: "negative" },
]
def sign(data)
data.key?(:status) ? ( data[:status] == "positive" ? "+" : "-" ) : ""
end
%>
<%# Completion Chart %>
<%= pb_rails("card", props: { padding: "none", border_none: true, shadow: "deeper",margin: "sm" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Pipeline Chart", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<% pipeline_data.each do |info| %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between", padding: "sm"}) do %>
<%= pb_rails("flex/flex_item", props: {fixed_size: "100px"}) do %>
<%= pb_rails("caption", props: { text: info[:label], size: 'xs' }) %>
<% end %>
<%= pb_rails("flex/flex_item", props: {grow:true}) do %>
<%= pb_rails("flex", props: {vertical: "center", spacing: "around"}) do %>
<%= pb_rails("progress_simple", props: { width: "100px",percent: info[:percent] }) %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { margin_left: "xs", text: "#{info[:percent]}%", size: 'xs' }) %>
<% end %>
<% end %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("body", props: {text: "#{info[:value]}"}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<%# Grid %>
<%= pb_rails("card", props: { border_none: true, shadow: "deeper",padding:"none", margin: "sm"}) do %>
<div class="gridone">
<% ticket_data.each do |ticket|%>
<%= pb_rails("background", props: { background_color: "white", padding: "md"}) do %>
<%= pb_rails("flex", props: {horizontal: "left", vertical: "center"}) do %>
<%= pb_rails("flex/flex_item",props:{fixed_size: "215px"}) do %>
<%= pb_rails("icon_stat_value", props: ticket ) %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<%# Bar Graph with Legend %>
<%= pb_rails("card", props: { padding: "none", margin: "sm", border_none: true, shadow: "deeper" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Total Revenue", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { padding_top: "sm" }) do %>
<%= pb_rails("bar_graph", props: {
chart_data: bar_graph[:data],
id: "bar-default",
y_axis_min: 0,
x_axis_categories:[],
height: "75%",
}) %>
<% end %>
<%= pb_rails("section_separator", props: { margin_y: "md" }) %>
<%= pb_rails("card/card_body") do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex", props: { classname: "flex-container", spacing: "between", horizontal: "center", margin: "xs", wrap: true }) do %>
<% bar_graph[:legend].each do |price| %>
<%= pb_rails("flex/flex_item", props: { margin_x: "xl" }) do %>
<%= pb_rails("currency", props: {
amount: price[:value].to_s,
label: price[:label],
emphasized: false,
margin_bottom: "md",
size: "md",
symbol: "$",
variant: "light",
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<%# Number Grid %>
<%= pb_rails("card", props: { border_none: true, shadow: "deeper", margin:"sm", padding:"none" }) do %>
<div class="gridtwo">
<% grid_data.each do |data| %>
<%= pb_rails("background", props: { background_color: "white", padding: "md"}) do %>
<%= pb_rails("flex", props: { orientation: "column", wrap: true}) do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("caption", props: { text: data[:title] }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("flex") do %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("title", props: { text: "#{data[:value]}#{data.key?(:unit) ? " " + data[:unit] : "" }", tag: "h3", size: 3 }) %>
<% end %>
<%= pb_rails("flex/flex_item") do %>
<%= pb_rails("body", props: { text: "#{sign(data)}#{data[:percent].to_i}%", status: data.key?(:status) ? data[:status] : nil, value: data[:percent], margin_left: "xs" }) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<%# Gauge With Legend %>
<%= pb_rails("card", props: { padding: "none", border_none: true, shadow: "deeper", margin: "sm" }) do %>
<%= pb_rails("flex", props: {vertical: "center",spacing: "between"}) do %>
<%= pb_rails("title", props: { text: "Total Revenue", tag: "h4", size: 4, padding: "sm" }) %>
<%= pb_rails("circle_icon_button", props: {
variant: "link",
icon: "ellipsis-h"
}) %>
<% end %>
<%= pb_rails("section_separator") %>
<%= pb_rails("card/card_body", props: { margin_top: "sm" }) do %>
<%= pb_rails("flex", props: {orientation: "column", vertical: "center", horizontal: "center"}) do %>
<%= pb_rails("gauge", props: {
id: "full-circle",
chart_data: total_revenue_green[:data],
full_circle: true,
}) %>
<%= pb_rails("caption", props: { text: "Total sales made today" }) %>
<% end %>
<% end %>
<%= pb_rails("section_separator", props: { margin_y: "md" }) %>
<%= pb_rails("card/card_body", props: { padding: "none" }) do %>
<%= pb_rails("flex", props: { classname: "flex-container", spacing: "between", horizontal: "center", margin: "xs", wrap: true }) do %>
<% total_revenue_green[:prices].each do |price| %>
<%= pb_rails("flex/flex_item", props: { margin: "sm" }) do %>
<%= pb_rails("currency", props: {
amount: price[:amount],
label: price[:name],
margin_bottom: "md",
size: "md",
symbol: "$",
variant: "light",
}) %>
<% end %>
<% end %>
<% end %>
<% end %>
<% end %>
<style>
[class^=grid]{
display: grid;
gap: 1px;
background-color: #e4e8f0; /* $border_light */
grid-template: auto auto / auto auto;
}
.gridtwo{
grid-template: repeat(2,auto) / repeat(4,1fr);
}
</style>