[eCommerce] Markdown

[eCommerce] Markdown

### Sample eCommerce Data
This dashboard contains sample data for you to play with. You can view it, search it, and interact with the visualizations. For more information about OpenSearch Dashboards, check our [docs](https://www.opensearch.org/guide/en/kibana/current/index.html).


opensearch_dashboards_sample_data_ecommerce


[eCommerce] Total Revenue

[eCommerce] Total Revenue


[eCommerce] Controls

[eCommerce] Controls


[eCommerce] Orders by Country


[eCommerce] Sales by Category

[eCommerce] Sales by Category

Sum of total_quantity


[eCommerce] Orders


[eCommerce] Promotion Tracking

[eCommerce] Promotion Tracking

Question: products.product_name:*cocktail dress*


[eCommerce] Average Sales Price

[eCommerce] Average Sales Price


[eCommerce] Sales by Gender

[eCommerce] Sales by Gender


[eCommerce] Sold Products per Day

[eCommerce] Sold Products per Day


[eCommerce] Average Sold Quantity

[eCommerce] Average Sold Quantity


[eCommerce] Top Selling Products

[eCommerce] Top Selling Products


Analyze mock eCommerce orders and revenue

[eCommerce] Revenue Dashboard


[eCommerce] Sales Count Map

[eCommerce] Sales Count Map

{
  $schema: https://vega.github.io/schema/vega/v5.json
  config: {
    opensearchDashboards: {type: "map", latitude: 25, longitude: -40, zoom: 3}
  }
  data: [
    {
      name: table
      url: {
        index: opensearch_dashboards_sample_data_ecommerce
        %context%: true
        %timefield%: order_date
        body: {
          size: 0
          aggs: {
            gridSplit: {
              geotile_grid: {field: "geoip.location", precision: 4, size: 10000}
              aggs: {
                gridCentroid: {
                  geo_centroid: {
                    field: "geoip.location"
                  }
                }
              }
            }
          }
        }
      }
      format: {property: "aggregations.gridSplit.buckets"}
      transform: [
        {
          type: geopoint
          projection: projection
          fields: [
            gridCentroid.location.lon
            gridCentroid.location.lat
          ]
        }
      ]
    }
  ]
  scales: [
    {
      name: gridSize
      type: linear
      domain: {data: "table", field: "doc_count"}
      range: [
        50
        1000
      ]
    }
  ]
  marks: [
    {
      name: gridMarker
      type: symbol
      from: {data: "table"}
      encode: {
        update: {
          size: {scale: "gridSize", field: "doc_count"}
          xc: {signal: "datum.x"}
          yc: {signal: "datum.y"}
        }
      }
    },
    {
      name: gridLabel
      type: text
      from: {data: "table"}
      encode: {
        enter: {
          fill: {value: "firebrick"}
          text: {signal: "datum.doc_count"}
        }
        update: {
          x: {signal: "datum.x"}
          y: {signal: "datum.y"}
          dx: {value: -6}
          dy: {value: 6}
          fontSize: {value: 18}
          fontWeight: {value: "bold"}
        }
      }
    }
  ]
}


[eCommerce] Revenue Tracking

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender"
| mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="MALE"} then=1 else=0} | math "sum(maleCount) / count(maleCount)"
| revealImage origin="bottom" image={asset "asset-aaa14d64-2c1c-47f2-95c0-21306ee18cba"} emptyImage={asset "asset-960c8c6e-da72-412d-9d04-34a98cdb5760"}

image mode="contain" dataurl={asset "asset-8ae4b612-43a3-4846-8f0d-abb9785e95c3"}

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender"
| mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="FEMALE"} then=1 else=0}
| math "sum(maleCount) / count(maleCount)"
| revealImage origin="bottom" image={asset "asset-2f64bd10-953d-4163-90e9-a55e9ca4c52a"} emptyImage={asset "asset-3a26727a-b756-44be-a82c-273dd85bda09"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="65" labels=false seriesStyle={seriesStyle label="Women's Clothing" color="#eb6c66"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="65" labels=false seriesStyle={seriesStyle label="Women's Accessories" color="#eb6c66"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="65" labels=false seriesStyle={seriesStyle label="Women's Shoes" color="#eb6c66"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

essql "SELECT category, COUNT(category) AS count FROM \"opensearch_dashboards_sample_data_ecommerce\" GROUP BY category"
| mapColumn "category" fn={if {getCell "category" | eq "Men's Accessories"} then={getCell "category"} else="Other"}
| ply by="category" fn={math "sum(count)" | as "count"} | staticColumn "total" value={math "sum(count)"}
| mapColumn "percentage" fn={math "round(count/total * 100, 2)"}
| pointseries color="category" size="percentage"
| pie hole="65" labels=false seriesStyle={seriesStyle label="Men's Accessories" color="#f8bd4a"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="65" labels=false seriesStyle={seriesStyle label="Men's Clothing" color="#f8bd4a"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="65" labels=false seriesStyle={seriesStyle label="Men's Shoes" color="#f8bd4a"}
  seriesStyle={seriesStyle label="Other" color="#ede9e7"}

image mode="contain" dataurl={asset "asset-66a89124-fc39-4109-8acd-e1ac7f382e04"} | render

image mode="contain" dataurl={asset "asset-4acbecf1-e514-4e3b-bce4-61920335941e"} | render

image mode="contain" dataurl={asset "asset-ae290f99-dd16-41a4-8191-7dd7be154be6"} | render

image mode="contain" dataurl={asset "asset-565cd264-9196-4ebd-9d6e-f413f1db734d"} | render

image mode="contain" dataurl={asset "asset-6222f3e0-1dab-4aa9-a06c-63d7732cc5f4"} | render

image mode="contain" dataurl={asset "asset-f8ac482e-0c7a-4cac-8bcf-6f4f55300081"} | render

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender" | mapColumn "femaleCount" exp={getCell "customer_gender" | if {compare to="FEMALE"} then=1 else=0} | math "round(100 * sum(femaleCount) / count(femaleCount))" | markdown {context} "%" font={font family="Avenir" size=48 align="center" color="#eb6c66" weight="normal" underline=false italic=false}

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender" | mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="MALE"} then=1 else=0} | math "round(100 * sum(maleCount) / count(maleCount))" | markdown {context} "%" font={font family="Avenir" size=48 align="center" color="#f8bd4a" weight="normal" underline=false italic=false}

filters | demodata | markdown "" | render containerStyle={containerStyle backgroundColor="#ede9e7"}

markdown "TOTAL SALES" font={font family="'Avenir', Helvetica, Arial, sans-serif" size=18 align="left" color="#777" weight="bold" underline=false italic=false}

markdown "WOMEN" font={font family="Avenir" size=18 align="left" color="#999" weight="normal" underline=false italic=false}

markdown "MEN" font={font family="Avenir" size=18 align="left" color="#999" weight="normal" underline=false italic=false} | render

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Clothing"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Shoes"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Accessories"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Accessories"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Clothing"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Shoes"}}
| markdown {getCell "percentage"} "%" font={font family="Avenir" size=24 align="center" color="#000" weight="normal" underline=false italic=false}

timeline
  ".opensearch(index=opensearch_dashboards_sample_data_ecommerce, metric=sum:taxless_total_price, timefield=order_date)" interval="1d" from={essql "SELECT order_date as min FROM opensearch_dashboards_sample_data_ecommerce order by order_date limit 1" | getCell min} to={essql "SELECT order_date as max FROM opensearch_dashboards_sample_data_ecommerce order by order_date DESC limit 1" | getCell max}
| pointseries x="@timestamp" y="value"
| plot yaxis=false defaultStyle={seriesStyle points="0" bars="50000000" lines="0" color="#62bb96"} font={font size=12 family="Avenir" color="#999" align="left"}

image mode="contain" dataurl={asset "asset-93e415d8-82c6-47d4-8c55-e38df329b88b"}

markdown "" | render containerStyle={containerStyle backgroundColor="#000000"}

markdown "## ○" font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false} | render containerStyle={containerStyle}

timeline
  ".opensearch(index=opensearch_dashboards_sample_data_ecommerce, metric=sum:taxless_total_price, timefield=order_date)" interval="1w"
| mapColumn "value" fn={math "round(value,0)"}
| staticColumn "mean" value={math "round(mean(value),0)"}
| mapColumn "mean" "as" "rnd" fn={math "round(random(0.9,1.1),2)"}
| mapColumn "value" "as" "final" fn={math "round(multiply(rnd,mean),2)"}
| pointseries x="@timestamp" y="final"
| plot xaxis=false yaxis=false defaultStyle={seriesStyle points="0" bars="0" lines="3" color="#eb6c66"}
| render containerStyle={containerStyle opacity="0.5"}

markdown "REVENUE BY CATEGORY" font={font family="'Avenir', Helvetica, Arial, sans-serif" size=24 align="left" color="#999" weight="normal" underline=false italic=false}

markdown "REVENUE BY DAY"
  font={font family="'Avenir', Helvetica, Arial, sans-serif" size=14 align="center" color="#62bb96" weight="normal" underline=false italic=false}

markdown "SALES PREDICTION"
  font={font family="'Avenir', Helvetica, Arial, sans-serif" size=10 align="center" color="#eb6c66" weight="normal" underline=false italic=false}

markdown "ACCESSORIES"
  font={font family="'Avenir', Helvetica, Arial, sans-serif" size=10 align="center" color="#999" weight="normal" underline=false italic=false}

markdown "CLOTHING"
  font={font family="'Avenir', Helvetica, Arial, sans-serif" size=10 align="center" color="#999" weight="normal" underline=false italic=false}

markdown "SHOES"
  font={font family="'Avenir', Helvetica, Arial, sans-serif" size=10 align="center" color="#999" weight="normal" underline=false italic=false}

essql
  query="SELECT sum(taxless_total_price) AS sum_total_price FROM \"opensearch_dashboards_sample_data_ecommerce\""
| math "sum_total_price"
| formatNumber "$0a"
| metric
  metricFont={font family="'Avenir', Helvetica, Arial, sans-serif" size=72 align="left" color="#000000" weight="normal" underline=false italic=false}
| render

Context: #fff

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender"
| mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="MALE"} then=1 else=0} | math "sum(maleCount) / count(maleCount)"
| revealImage origin="bottom" image={asset "asset-803ec373-2608-4f6f-8cf9-0dbb2f6437ce"} emptyImage={asset "asset-18070a2a-cd01-410a-ba89-a4505e2fbc5b"}

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender"
| mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="FEMALE"} then=1 else=0} | math "sum(maleCount) / count(maleCount)"
| revealImage origin="bottom" image={asset "asset-e644a484-4097-40b9-a08e-7250ba963059"} emptyImage={asset "asset-7e4f7119-b2d8-4527-9bd8-887cb25974e7"}

timeline
  ".opensearch(index=opensearch_dashboards_sample_data_ecommerce, metric=sum:taxless_total_price, timefield=order_date)" interval="1d" from={essql "SELECT order_date as min FROM opensearch_dashboards_sample_data_ecommerce order by order_date limit 1" | getCell min} to={essql "SELECT order_date as max FROM opensearch_dashboards_sample_data_ecommerce order by order_date DESC limit 1" | getCell max}
| pointseries x="@timestamp" y="value"
| plot yaxis=false defaultStyle={seriesStyle points="0" bars="50000000" lines="0" color="#00A89C"}
  font={font family="gilroy extrabold, Avenir" size=16 align="left" color="#F05A24" weight="bold" underline=false italic=false}

essql "SELECT category, COUNT(category) AS count FROM \"opensearch_dashboards_sample_data_ecommerce\" GROUP BY category"
| mapColumn "category" fn={if {getCell "category" | eq "Men's Accessories"} then={getCell "category"} else="Other"}
| ply by="category" fn={math "sum(count)" | as "count"} | staticColumn "total" value={math "sum(count)"}
| mapColumn "percentage" fn={math "round(count/total * 100, 2)"}
| pointseries color="category" size="percentage"
| pie hole="85" labels=false seriesStyle={seriesStyle label="Men's Accessories" color="#00A89C"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

essql
  "SELECT category, COUNT(category) AS count FROM \"opensearch_dashboards_sample_data_ecommerce\" GROUP BY category ORDER BY category"
| mapColumn "category"
  fn={if {getCell "category" | eq "Men's Clothing"} then={getCell "category"} else="Other"}
| ply by="category" fn={math "sum(count)" | as "count"}
| staticColumn "total" value={math "sum(count)"}
| mapColumn "percentage" fn={math "round(count/total * 100, 2)"}
| sort "category"
| pointseries color="category" size="percentage"
| pie hole="85" labels=false seriesStyle={seriesStyle label="Men's Clothing" color="#00A89C"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

essql "SELECT category, COUNT(category) AS count FROM \"opensearch_dashboards_sample_data_ecommerce\" GROUP BY category"
| mapColumn "category" fn={if {getCell "category" | eq "Men's Shoes"} then={getCell "category"} else="Other"}
| ply by="category" fn={math "sum(count)" | as "count"} | staticColumn "total" value={math "sum(count)"}
| mapColumn "percentage" fn={math "round(count/total * 100, 2)"}
| pointseries color="category" size="percentage"
| pie hole="85" labels=false seriesStyle={seriesStyle label="Men's Shoes" color="#00A89C"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="85" labels=false palette={palette "#CBCBCB" "#F05A24" gradient=false} seriesStyle={seriesStyle label="Women's Accessories" color="#F05A24"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="85" labels=false seriesStyle={seriesStyle label="Women's Clothing" color="#F05A24"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 2)'}
| pointseries color=category size=percentage
| pie hole="85" labels=false seriesStyle={seriesStyle label="Women's Shoes" color="#F05A24"}
  seriesStyle={seriesStyle label="Other" color="#CBCBCB"}

image mode="contain" dataurl={asset "asset-e79711e8-d9da-45e1-a234-9efe226a444d"}
| render

image mode="contain" dataurl={asset "asset-9493e336-1b11-4e61-bad2-716c46194550"}
| render

image mode="contain" dataurl={asset "asset-23f2bfe9-e58c-4a56-98c6-fad59eecdf74"}
| render

markdown "W"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "O"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "M"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "E"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "N"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "M"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#00A89C" weight="bold" underline=false italic=false}

markdown "E"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#00A89C" weight="bold" underline=false italic=false}

markdown "N"
  font={font family="gilroy extrabold, Avenir" size=24 align="left" color="#00A89C" weight="bold" underline=false italic=false}

image mode="contain" dataurl={asset "asset-86d05b5e-1a4b-4979-95e9-7071b9923470"}
| render

image mode="contain" dataurl={asset "asset-fdfc9cc7-2c6a-44fe-b9be-c4ff115c92c1"}
| render

image mode="contain" dataurl={asset "asset-58ae3445-4001-45e7-9603-19ec8d41e64e"}
| render

markdown "P R O G R E S S"
  font={font family="gilroy extrabold, Avenir" size=12 align="center" color="#F05A24" weight="bold" underline=false italic=false}

markdown ""
| render containerStyle={containerStyle backgroundColor="#F05A24"}

markdown "T O T A L"
  font={font family="gilroy extrabold, Avenir" size=12 align="center" color="#F05A24" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Accessories"}}
| markdown {getCell "percentage"} font={font family="nexa bold, Avenir" size=36 align="center" color="#00A89C" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Clothing"}}
| markdown {getCell "percentage"} font={font family="nexa bold, Avenir" size=36 align="center" color="#00A89C" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Men's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Men's Shoes"}}
| markdown {getCell "percentage"} font={font family="nexa bold, Avenir" size=36 align="center" color="#00A89C" weight="bold" underline=false italic=false}

markdown "%"
  font={font family="nexa extrabold, Avenir" size=24 align="left" color="#00A89C" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Accessories"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Accessories"}}
| markdown {getCell "percentage"} "" font={font family="nexa bold, Avenir" size=36 align="center" color="#F05A24" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Clothing"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Clothing"}}
| markdown {getCell "percentage"} font={font family="nexa bold, Avenir" size=36 align="center" color="#F05A24" weight="bold" underline=false italic=false}

essql 'SELECT category, COUNT(category) AS count FROM "opensearch_dashboards_sample_data_ecommerce" GROUP BY category'
| mapColumn category fn={if {getCell category | eq "Women's Shoes"} then={getCell category} else="Other"}
| ply by=category fn={math 'sum(count)' | as count}
| staticColumn total value={math 'sum(count)'}
| mapColumn percentage fn={math 'round(count/total * 100, 0)'}
| filterrows {getCell "category" | any {eq "Women's Shoes"}}
| markdown {getCell "percentage"} font={font family="nexa bold, Avenir" size=36 align="center" color="#F05A24" weight="bold" underline=false italic=false}

markdown "%"
  font={font family="nexa extrabold, Avenir" size=24 align="left" color="#F05A24" weight="bold" underline=false italic=false}

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender" | mapColumn "femaleCount" exp={getCell "customer_gender" | if {compare to="FEMALE"} then=1 else=0} | math "round(100 * sum(femaleCount) / count(femaleCount))" | markdown {context} font={font family="nexa bold, Avenir" size=48 align="center" color="#F05A24" weight="bold" underline=false italic=false}

esdocs index="opensearch_dashboards_sample_data_ecommerce" sort="order_date, desc" fields="customer_gender" | mapColumn "maleCount" exp={getCell "customer_gender" | if {compare to="MALE"} then=1 else=0} | math "round(100 * sum(maleCount) / count(maleCount))" | markdown {context} font={font family="nexa bold, Avenir" size=48 align="center" color="#00A89C" weight="bold" underline=false italic=false}

markdown "%"
  font={font family="nexa extrabold, Avenir" size=36 align="left" color="#00A89C" weight="bold" underline=false italic=false}

markdown "%"
  font={font family="nexa extrabold, Avenir" size=36 align="left" color="#F05A24" weight="bold" underline=false italic=false}

markdown "$"
  font={font family="nexa bold, Avenir" size=36 align="left" color="#00A89C" weight="bold" underline=false italic=false}

markdown "ACME Inc." font={font family="gilroy extrabold, Avenir" size=72 align="center" color="#CDCDCD" weight="bold" underline=false italic=false}

essql
  query="SELECT sum(taxless_total_price) AS sum_total_price FROM \"opensearch_dashboards_sample_data_ecommerce\""
| math "sum_total_price"
| formatNumber "0a"
| metric
  metricFont={font family="nexa bold, Avenir" size=72 align="center" color="#00A89C" weight="bold" underline=false italic=false}
| render


Dark

filters
| demodata
| markdown "# Title
## Author Name

Month Day, Year"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
color: white !important;
}
.canvasMarkdown h2,
.canvasMarkdown p {
color: #C4C4C4;
}
.canvasMarkdown p {
font-size: 16px;
}"

image dataurl={asset "asset-65395214-ad30-4a5b-9c2f-eaee2338486a"} mode="contain"
| render

filters
| demodata
| markdown "# Add title here"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
color: white !important;
}"

filters
| demodata
| markdown "# Add title here
## Add subtitle here"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
color: white !important;
}
.canvasMarkdown h2,
.canvasMarkdown p {
color: #C4C4C4;
}
.canvasMarkdown p {
font-size: 16px;
}"

filters
| demodata
| markdown "# Add title here"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 48px !important;
color: white !important;
}"

filters
| demodata
| markdown "Add slide content here
- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #C4C4C4;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| markdown "Left column
- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #C4C4C4;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| markdown "Right column
- first item
- second item
"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #C4C4C4;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

shape "square" fill="#01b2a4" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown "Right column
- first item
- second item
"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #000000;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="2" fill=1 bars="0" points="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)"}

filters
| demodata
| pointseries color="project" size="max(price)"
| pie hole=48 labels=true legend=false
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} labelRadius=100 radius=0.7
| render css=".canvasRenderEl {

}
.pieLabel div {
line-height: 1.4 !important;
}
"

filters
| demodata
| markdown "- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #C4C4C4;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| math "median(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(255,255,255,0.25)"
| render

filters
| demodata
| markdown "# Add title here"
| render
  css=".canvasMarkdown h1 {
font-size: 48px !important;
color: white !important;
}"

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(255,255,255,0.25)"
| render

filters
| demodata
| math "median(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(255,255,255,0.25)" max=1
| render

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="1" fill=1 bars="0" points="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)"}

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render

filters
| demodata
| math "median(percent_uptime)"
| progress shape="semicircle" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(255,255,255,0.25)"
| render

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="semicircle" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#FFFFFF" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(255,255,255,0.25)"
| render


Pitch

.canvasPage h1, .canvasPage h2, .canvasPage h3, .canvasPage h4, .canvasPage h5 {
font-family: 'Futura';
color: #444444;
}

.canvasPage h1 {
font-size: 112px;
font-weight: bold;
color: #FFFFFF;
}

.canvasPage h2 {
font-size: 48px;
font-weight: bold;
}

.canvasPage h3 {
font-size: 30px;
font-weight: 300;
text-transform: uppercase;
color: #FFFFFF;
}

.canvasPage h5 {
font-size: 24px;
font-style: italic;
}

image dataurl={asset "asset-a30a06eb-2276-44b1-a62d-856e2116138c"} mode="cover"
| render

shape "square" fill="#000000" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render containerStyle={containerStyle opacity="0.7"}

filters
| demodata
| markdown "# Sample."
| render css=".canvasRenderEl h1 {
text-align: center;
}"

filters
| demodata
| markdown "### This is a subtitle"
| render css=".canvasRenderEl h3 {
text-align: center;
}"

filters
| demodata
| markdown "Footnote can go here"
| render
  css=".canvasRenderEl p {
text-align: center;
color: #FFFFFF;
font-size: 18px;
opacity: .7;
}"

image dataurl={asset "asset-23edd689-2d34-4bb8-a3eb-05420dd87b85"} mode="contain"
| render

Context: #FFF

image dataurl={asset "asset-048ed81e-84ae-4a48-9c30-641cf72b0376"} mode="cover"
| render

shape "square" fill="#45bdb0" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown "##### CATEGORY 01"
| render

filters
| demodata
| markdown "## Half text, half _image._"
| render

shape "square" fill="#444444" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

Context: #FFF

filters
| demodata
| markdown "##### BIOS"
| render

filters
| demodata
| markdown "## Jane Doe"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "### Developer"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl h3 {
color: #444444;
}"

filters
| demodata
| markdown
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel sollicitudin mauris, ut scelerisque urna. "
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render

image dataurl={asset "asset-aa91a324-8012-477e-a7e4-7c3cd7a6332f"} mode="contain"
| render

image dataurl={asset "asset-0c6f377f-771e-432e-8e2e-15c3e9142ad6"} mode="contain"
| render

filters
| demodata
| markdown "### Designer"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl h3 {
color: #444444;
}"

image dataurl={asset "asset-9c2e5ab5-2dbe-43a8-bc84-e67f191fbcd8"} mode="contain"
| render

filters
| demodata
| markdown "## John Smith"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render

Context: #FFF

image dataurl={asset "asset-6fb8f925-0e1e-4108-8442-3dbf88d145e5"} mode="cover"
| render

filters
| demodata
| markdown "##### CATEGORY 10"
| render

filters
| demodata
| markdown "## Another page style."
| render css=".canvasRenderEl h2 {
font-size: 64px;
}"

filters
| demodata
| markdown "### Introduction"
| render css=".canvasRenderEl h3 {
color: #444444;
}"

Context: #FFF

image dataurl={asset "asset-d38c5025-eafc-4a35-a5fd-fb7b5bdc9efa"} mode="cover"
| render

filters
| demodata
| markdown "##### CATEGORY 01"
| render css=".canvasRenderEl h5 {
color: #45bdb0;
}"

filters
| demodata
| markdown
  "Cras dapibus urna non feugiat imperdiet. Donec mauris, ut scelerisque urna. Sed vel neque quis metus luctus."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=30 align="center" color="#45bdb0" weight="bold" underline=false italic=false} valueColor="#45bdb0" valueWeight=15 barColor="#444444" barWeight=15
| render

image dataurl={asset "asset-b22b6fa7-618c-4a59-82a1-ca921454da48"} mode="contain"
| render

Context: #FFF

image dataurl={asset "asset-7f2d5d96-3c85-49a0-94f3-e9b05de23cb6"} mode="cover"
| render

filters
| demodata
| markdown "##### CATEGORY 01"
| render

filters
| demodata
| markdown "## Bold title text goes _here_."
| render

filters
| demodata
| markdown "Caption text goes here"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="right" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl p {
font-size: 18px;
opacity: .8;
}"

Context: #FFF

image dataurl={asset "asset-048ed81e-84ae-4a48-9c30-641cf72b0376"} mode="cover"
| render

filters
| demodata
| markdown "## Title for live charts."
| render css=".canvasRenderEl h2 {
color: #FFFFFF;
}"

filters
| demodata
| markdown "## _Charts with live data._"
| render css=".canvasRenderEl h1 {

}"

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="horizontalBar" label={formatnumber "0%"}
  font={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=18 align="center" color="#444444" weight="bold" underline=false italic=false} valueColor="#45bdb0" valueWeight=15 barColor="#444444" barWeight=15
| render css=".canvasRenderEl {
width: 100%;
}"

filters
| demodata
| markdown
  "Cras dapibus urna non feugiat imperdiet.

Donec vel sollicitudin mauris, ut scelerisque urna. Sed vel neque quis metus vulputate luctus."
| render

Context: #FFF

image dataurl={asset "asset-0791ed56-9a2e-4d0d-8d2d-a2f8c3c268ee"} mode="cover"
| render

shape "square" fill="#222222" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown "## Title on a _dark_ background."
| render css=".canvasRenderEl h2 {
color: #FFFFFF;
}"

shape "square" fill="#FFFFFF" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dapibus urna non feugiat imperdiet. Donec vel sollicitudin mauris, ut scelerisque urna. Sed vel neque quis metus vulputate luctus."
| render css=".canvasRenderEl p {
color: #FFFFFF;
opacity: .8;
}"

Context: #FFF

filters
| demodata
| markdown "## Bullet point layout style"
| render

filters
| demodata
| markdown
  "- Dolor sit amet, consectetur adipiscing elit
- Cras dapibus urna non feugiat imperdiet
- Donec vel sollicitudin mauris, ut scelerisque urna
- Sed vel neque quis metus vulputate luctus
- Dolor sit amet, consectetur adipiscing elit
- Cras dapibus urna non feugiat imperdiet
- Donec vel sollicitudin mauris, ut scelerisque urna
- Sed vel neque quis metus vulputate luctus"
| render css=".canvasRenderEl li {
font-size: 24px;
line-height: 30px;
}"

filters
| demodata
| markdown
  "Donec vel sollicitudin mauris, ut scelerisque urna. Vel sollicitudin mauris, ut scelerisque urna."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=true}
| render css=".canvasRenderEl p {
font-size: 18px;
opacity: .8;
}"

filters
| demodata
| markdown "### Subtitle goes here"
| render css=".canvasRenderEl h3 {
color: #45bdb0;
text-transform: none;
}"

Context: #FFF

filters
| demodata
| markdown "## Paragraph layout style"
| render

filters
| demodata
| markdown
  "Proin ipsum orci, consectetur a lacus vel, varius rutrum neque. Mauris quis gravida tellus. Integer quis tellus non lectus vestibulum fermentum. Quisque tortor justo, vulputate quis mollis eu, molestie eu ex. Nam eu arcu ac dui mattis facilisis aliquam venenatis est. Quisque tempor risus quis arcu viverra, quis consequat dolor molestie. Sed sed arcu dictum, sollicitudin dui id, iaculis elit. Nunc odio ex, placerat sed hendrerit vitae, finibus eu felis. Sed vulputate mi diam, at dictum mi tempus eu.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus malesuada tortor vel eleifend lobortis. Donec vestibulum neque vel neque vehicula auctor. Proin id felis a leo ultrices maximus."
| render css=".canvasRenderEl p {
font-size: 24px;
}"

Context: #FFF

filters
| demodata
| markdown "## Title text can also go _here_ on multiple lines."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl h2 {
color: #FFFFFF;
}"

filters
| demodata
| markdown
  "Vivamus malesuada tortor vel eleifend lobortis. Donec vestibulum neque vel neque vehicula auctor. Proin id felis a leo ultrices maximus. Nam est nulla, venenatis at mi et, sodales convallis eros. Aliquam a convallis justo, eu viverra augue. Donec mollis ipsum sed orci posuere, vel posuere neque tempus."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl p {
color: #FFFFFF;
opacity: .8;
}"

filters
| demodata
| markdown "## This title is a _centered_  layout."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl h2 {
color: #FFFFFF;
}"

Context: #FFF

filters
| demodata
| markdown
  "## \"Aliquam mollis auctor nisl vitae varius. Donec nunc turpis, condimentum non sagittis tristique, sollicitudin blandit sem.\""
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=true}
| render

filters
| demodata
| markdown "### Lorem Ipsum"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl h3 {
color: #45bdb0;
text-transform: none;
}"

Context: #FFF

filters
| demodata
| markdown "##### CATEGORY 01"
| render css=".canvasRenderEl h5 {
color: #FFFFFF;
}"

filters
| demodata
| markdown
  "Donec vel sollicitudin mauris, ut scelerisque urna. Sed vel neque quis metus vulputate luctus."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl p {
color: #FFFFFF;
opacity: .8;
font-size: 18px;
}"

filters
| demodata
| math "unique(project)"
| metric "Projects"
  metricFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=72 align="center" color="#45bdb0" weight="bold" underline=false italic=false}
  labelFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=24 align="center" color="#45bdb0" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl .canvasMetric__metric {
margin-bottom: 32px;
}"

filters
| demodata
| markdown
  "Donec vel sollicitudin mauris, ut scelerisque urna. Vel sollicitudin mauris, ut scelerisque urna."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#FFFFFF" weight="normal" underline=false italic=true}
| render css=".canvasRenderEl p {
font-size: 16px;
opacity: .7;
}"

filters
| demodata
| math "unique(country)"
| metric "Countries"
  metricFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=72 align="center" color="#45bdb0" weight="bold" underline=false italic=false}
  labelFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=24 align="center" color="#45bdb0" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl .canvasMetric__metric {
margin-bottom: 32px;
}"

filters
| demodata
| math "unique(username)"
| metric "Customers"
  metricFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=72 align="center" color="#45bdb0" weight="bold" underline=false italic=false}
  labelFont={font family="Futura, Impact, Helvetica, Arial, sans-serif" size=24 align="center" color="#45bdb0" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl .canvasMetric__metric {
margin-bottom: 32px;
}"

Context: #FFF

filters
| demodata
| markdown "## An alternative opening title slide."
| render css=".canvasRenderEl h2 {
font-size: 64px;
}"

Context: #FFF


Infographic-style report with live charts

Summary

shape "square" fill="#69707D" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render css=".canvasRenderEl {

}" containerStyle={containerStyle}

shape "square" fill="rgba(255,255,255,0)" border="rgba(255,255,255,0)" borderWidth=2 maintainAspect=false
| render css=".canvasRenderEl {

}"
  containerStyle={containerStyle borderRadius="6px" border="2px solid #D3DAE6" backgroundColor="rgba(255,255,255,0)"}

filters
| demodata
| markdown "### Total cost by project type"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| pointseries x="size(project)" y="project" color="project"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true} legend=false seriesStyle={seriesStyle label="opensearch" color="#882e72"}
  seriesStyle={seriesStyle label="machine-learning" color="#d6c1de"}
  seriesStyle={seriesStyle label="apm" color="#5289c7"}
  seriesStyle={seriesStyle label="opensearch-dashboards" color="#7bafde"}
  seriesStyle={seriesStyle label="beats" color="#b178a6"}
  seriesStyle={seriesStyle label="logstash" color="#1965b0"}
  seriesStyle={seriesStyle label="x-pack" color="#4eb265"}
  seriesStyle={seriesStyle label="swiftype" color="#90c987"}
| render
  css=".flot-y-axis {
 left: 14px !important;
}

.flot-x-axis>div {
 top: 380px !important;
}"

filters
| demodata
| markdown "### Number of projects by project type"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "##### Global cost distribution"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "##### Project type distribution
"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| pointseries x="project" y="mean(percent_uptime)" color="project"
| plot defaultStyle={seriesStyle bars=0.75} legend=false seriesStyle={seriesStyle label="opensearch" color="#882e72"}
  seriesStyle={seriesStyle label="machine-learning" color="#d6c1de"}
  seriesStyle={seriesStyle label="apm" color="#5289c7"}
  seriesStyle={seriesStyle label="logstash" color="#1965b0"}
  seriesStyle={seriesStyle label="x-pack" color="#4eb265"}
  seriesStyle={seriesStyle label="opensearch-dashboards" color="#7bafde"}
  seriesStyle={seriesStyle label="swiftype" color="#90c987"}
  seriesStyle={seriesStyle label="beats" color="#b178a6"}
| render css=".flot-x-axis>div {
 top: 258px !important;
}"

filters
| demodata
| markdown "### Average uptime"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "##### Global average uptime
"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center"} valueColor="#4eb265"
| render containerStyle={containerStyle}

filters
| demodata
| markdown "### Average price by project type"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "### Raw data"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| pointseries color="project" size="sum(cost)"
| pie hole=50 labels=false legend="ne"
| render
  css="table {
  right: -16px !important;
}

tr {
 height: 36px;
}

.legendColorBox div {
 margin-right: 7px;
}

.legendColorBox div div {
 width: 24px !important;
 height: 24px !important;
border-width: 4px !important;
}

td {
 vertical-align: middle;
}" containerStyle={containerStyle overflow="visible"}

filters
| demodata
| table
| render containerStyle={containerStyle overflow="hidden"}

filters
| demodata
| pointseries x="time" y="mean(price)" color="project"
| plot defaultStyle={seriesStyle lines=3}
  palette={palette "#882E72" "#B178A6" "#D6C1DE" "#1965B0" "#5289C7" "#7BAFDE" "#4EB265" "#90C987" "#CAE0AB" "#F7EE55" "#F6C141" "#F1932D" "#E8601C" "#DC050C" gradient=false} legend="ne" seriesStyle={seriesStyle label="opensearch" color="#882e72"}
  seriesStyle={seriesStyle color="#b178a6" label="beats"}
  seriesStyle={seriesStyle label="machine-learning" color="#d6c1de"}
  seriesStyle={seriesStyle label="logstash" color="#1965b0"}
  seriesStyle={seriesStyle label="apm" color="#5289c7"}
  seriesStyle={seriesStyle label="opensearch-dashboards" color="#7bafde"}
  seriesStyle={seriesStyle label="x-pack" color="#4eb265"}
  seriesStyle={seriesStyle label="swiftype" color="#90c987"}
| render containerStyle={containerStyle overflow="visible"}
  css=".legend table {
 top: 266px !important;
 width: 100%;
 left: 80px;
}

.legend td {
vertical-align: middle;
}

tr {
 padding-left: 14px;
}

.legendLabel {
 padding-left: 4px;
}

tbody {
 display: flex;
}

.flot-x-axis {
 top: 16px !important;
}"

timefilterControl compact=true column="@timestamp"
| render css=".canvasTimePickerPopover__button {
 border: none !important;
}"

timefilter from="now-14d" to=now column=@timestamp

filters
| demodata
| markdown "#### Time period"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render css="h4 {
 font-weight: 400;
}"

filters
| demodata
| markdown "##### Average uptime by project type"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "### Average price over time"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "##### Price trend over time"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "##### State distribution
"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#000000" weight="normal" underline=false italic=false}
| render css=""

filters
| demodata
| markdown "## Monitoring OpenSearch projects" ""
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#FFFFFF" weight="bold" underline=false italic=false}
| render css=".canvasRenderEl {

}"

image dataurl=null mode="contain"
| render

filters
| demodata
| pointseries x="sum(cost)" y="project" color="state"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true} legend="ne"
| render containerStyle={containerStyle overflow="visible"}
  css=".legend table {
 top: 100px !important;
 right: -46px !important;
}

.legendColorBox>div{
margin-right: 3px !important;
}

.legend td {

vertical-align: middle;
}

.legend tr {
 height: 20px;
}

.flot-x-axis {
 top: -15px !important;
}

.flot-y-axis {
 left: 10px !important;
}"

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle bars=0.75} legend=false
  palette={palette "#882E72" "#B178A6" "#D6C1DE" "#1965B0" "#5289C7" "#7BAFDE" "#4EB265" "#90C987" "#CAE0AB" "#F7EE55" "#F6C141" "#F1932D" "#E8601C" "#DC050C" gradient=false}
| render
  css=".flot-x-axis {
 top: -15px !important;
}

.flot-y-axis {
 left: 10px !important;
}"

Context: #FFF


Light

filters
| demodata
| markdown "# Title
## Author Name

Month Day, Year"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
}
.canvasMarkdown h2,
.canvasMarkdown p {
color: #666666;
}
.canvasMarkdown p {
font-size: 16px;
}"

image dataurl={asset "asset-4446bdf3-a824-41ee-94c3-93b3e8f65bb3"} mode="contain"
| render

filters
| demodata
| markdown "# Add title here"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
}"

filters
| demodata
| markdown "# Add title here
## Add subtitle here"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="center" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 64px !important;
}
.canvasMarkdown h2,
.canvasMarkdown p {
color: #666666;
}
.canvasMarkdown p {
font-size: 16px;
}"

filters
| demodata
| markdown "# Add title here"
| render css=".canvasRenderEl {

}
.canvasMarkdown h1 {
font-size: 48px !important;
}"

filters
| demodata
| markdown "Add slide content here
- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #666666;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| markdown "Left column
- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #666666;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| markdown "Right column
- first item
- second item
"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #666666;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

shape "square" fill="#01b2a4" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown "Right column
- first item
- second item
"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #000000;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="2" fill=1 bars="0" points="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#666666" weight="normal" underline=false italic=false}
| render containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)"}

filters
| demodata
| pointseries color="project" size="max(price)"
| pie hole=48 labels=true legend=false
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="center" color="#666666" weight="normal" underline=false italic=false} labelRadius=100 radius=0.7
| render css=".canvasRenderEl {

}
.pieLabel div {
line-height: 1.4 !important;
}
"

filters
| demodata
| markdown "- first item
- second item
- third item"
| render
  css=".canvasRenderEl {

}
.canvasMarkdown p,
.canvasMarkdown li {
color: #666666;
font-size: 24px;
}
.canvasMarkdown li {
margin-bottom: 16px;
}"

filters
| demodata
| math "median(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#666666" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(0,0,0,0.1)"
| render

filters
| demodata
| markdown "# Add title here"
| render css=".canvasMarkdown h1 {
font-size: 48px !important;
}"

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#666666" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(0,0,0,0.1)"
| render

filters
| demodata
| math "median(percent_uptime)"
| progress shape="wheel" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#666666" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(0,0,0,0.1)" max=1
| render

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="1" fill=1 bars="0" points="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#666666" weight="normal" underline=false italic=false}
| render containerStyle={containerStyle backgroundColor="rgba(255,255,255,0)"}

filters
| demodata
| pointseries x="time" y="mean(price)"
| plot defaultStyle={seriesStyle lines="1"}
  palette={palette "#1ea593" "#2b70f7" "#ce0060" "#38007e" "#fca5d3" "#f37020" "#e49e29" "#b0916f" "#7b000b" "#34130c" gradient=false}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=16 align="left" color="#666666" weight="normal" underline=false italic=false}
| render

filters
| demodata
| math "median(percent_uptime)"
| progress shape="semicircle" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#666666" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(0,0,0,0.1)"
| render

filters
| demodata
| math "mean(percent_uptime)"
| progress shape="semicircle" label={formatnumber "0%"}
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=24 align="center" color="#666666" weight="normal" underline=false italic=false} valueColor="#01b2a4" barColor="rgba(0,0,0,0.1)"
| render


Status

.canvasPage h1, .canvasPage h2, .canvasPage h3, .canvasPage h4, .canvasPage h5, .canvasPage h6, .canvasPage li, .canvasPage p, .canvasPage th, .canvasPage td {
font-family: "Gill Sans" !important;
color: #333333;
}

.canvasPage h1, .canvasPage h2 {
font-weight: 400;
}

.canvasPage h2 {
text-transform: uppercase;
color: #1785B0;
}

.canvasMarkdown p,
.canvasMarkdown li {
font-size: 18px;
}

.canvasMarkdown li {
margin-bottom: .75em;
}

.canvasMarkdown h3:not(:first-child) {
margin-top: 2em;
}

.canvasMarkdown a {
color: #1785B0;
}

.canvasMarkdown th,
.canvasMarkdown td {
padding: .5em 1em;
}

.canvasMarkdown th {
background-color: #FAFBFD;
}

.canvasMarkdown table,
.canvasMarkdown th,
.canvasMarkdown td {
border: 1px solid #e4e9f2;
}

image dataurl={asset "asset-4150038b-cb60-4662-8cea-9dd555894495"} mode="contain"
| render

filters
| demodata
| markdown
  "# Cover Title Goes Here

Short description or intro text about document/report for the cover.
Edit the Markdown content in the side panel.

##### Firstname Lastname"
  font={font family="'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif" size=24 align="left" color="#FFFFFF" weight="normal" underline=false italic=false}
| render
  css=".canvasMarkdown h1, .canvasMarkdown p {
color: #EFEFEF;
}

.canvasMarkdown h5 {
color: #FFFFFF;
font-weight: 300;
font-size: .75em;
margin-top: 2em;
font-style: italic;
}"

image dataurl={asset "asset-c9ab1060-1cb4-49c6-9225-7e729c91c37c"} mode="contain"
| render

image dataurl={asset "asset-9ed5be46-c1f2-4426-ae59-015e321d7bf5"} mode="contain"
| render

image dataurl={asset "asset-cd6e5345-5143-44f7-a49d-91729e402bda"} mode="contain"
| render

image dataurl={asset "asset-36fdf391-6df1-4e09-b6aa-6e219b9faf37"} mode="contain"
| render

filters
| demodata
| markdown "## Table of contents"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#1785b0" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown
  "- Section with Markdown Text Formatting
- Section with Live Charts
- Section with Tabular Data"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="left" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl ul {
padding-left: 0;
}
.canvasRenderEl li {
list-style: none;
line-height: 2em;
}"

filters
| demodata
| markdown "- 3
- 5
- 8"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="left" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl ul {
padding-left: 0;
}
.canvasRenderEl li {
list-style: none;
line-height: 2em;
text-align: right;
}"

filters
| demodata
| markdown "- 2
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

image dataurl={asset "asset-9e9608d5-9432-4d4c-8fea-afe4e461eb57"} mode="contain"
| render

Context: #FFF

filters
| demodata
| markdown "## Section 1"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#1785b0" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "# Section with Markdown Text Formatting"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="left" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl ul {
padding-left: 0;
}
.canvasRenderEl li {
list-style: none;
line-height: 2em;
}"

filters
| demodata
| markdown "- 3
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

Context: #FFF

filters
| demodata
| markdown
  "### Subsection heading 3 on one line

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

1. Duis autem vel eum iriure dolor in
2. Hendrerit in vulputate velit esse
3. Consequat, vel illum dolore

### Subsection heading 3 wraps to a second line when it is long

Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin.

Paragraph with a link to [opensearch.org](https://www.opensearch.org)."
| render

filters
| demodata
| markdown "- 4
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

Context: #FFF

filters
| demodata
| markdown "## Section II"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#1785b0" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "# Section with Live Data Elements"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="left" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl ul {
padding-left: 0;
}
.canvasRenderEl li {
list-style: none;
line-height: 2em;
}"

filters
| demodata
| markdown "- 5
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

Context: #FFF

filters
| demodata
| markdown
  "### Subsection with live data elements

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#1785b0" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "- 6
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

filters
| demodata
| pointseries x="size(cost)" y="project" color="project"
| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true} legend=false palette={palette "#7ECAE3" "#003A4D" gradient=true}
  font={font family="'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif" size=16 align="left" color="#444444" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "#### Chart title goes here"
| render css=".canvasMarkdown h4 {
text-align: center;
color: #1785b0;
}"

Context: #FFF

filters
| demodata
| markdown "- 7
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

filters
| demodata
| pointseries color="project" size="price"
| pie hole=60 labels=true legend=false palette={palette "#7ECAE3" "#003A4D" gradient=true}
  font={font family="'Gill Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif" size=16 align="center" color="#444444" weight="normal" underline=false italic=false}
| render

Context: #FFF

filters
| demodata
| markdown "## Section III"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=14 align="left" color="#1785b0" weight="normal" underline=false italic=false}
| render

filters
| demodata
| markdown "# Section with Tabular Data"
  font={font family="'Open Sans', Helvetica, Arial, sans-serif" size=18 align="left" color="#000000" weight="normal" underline=false italic=false}
| render
  css=".canvasRenderEl ul {
padding-left: 0;
}
.canvasRenderEl li {
list-style: none;
line-height: 2em;
}"

filters
| demodata
| markdown "- 8
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

Context: #FFF

filters
| demodata
| tail 1
| markdown
  "### Table with live data

Select a project above to change the scope of this data.

| User        | Created           | Age  |
| ------------- |:-------------| -------------:|
| " {getCell "username"} "      | " {getCell "time" | formatDate "MMMM DD YYYY"}
  " | " {getCell "age"}
  "|

### Table with static data

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

| Heading 1        | Heading 2           |
| ------------- |:-------------| -------------:|
| First item name      | Cell with text |
| Second item name      | Another cell with text      "
| render css=".canvasMarkdown table {
display: table;
width: 100%;
}"

filters
| demodata
| markdown "- 9
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #A4A4A4;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #A4A4A4;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

demodata
| dropdownControl valueColumn="project" filterColumn="project"
| render

Context: #FFF

shape "square" fill="#1785b0" border="rgba(255,255,255,0)" borderWidth=0 maintainAspect=false
| render

filters
| demodata
| markdown
  "### Conclusion

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

- Duis autem vel eum iriure dolor in
- Hendrerit in vulputate velit esse
- Consequat, vel illum dolore"
| render

filters
| demodata
| markdown "- 10
- yoursite.com
- © 2019 Company Name Here. All Rights Reserved.     "
| render
  css=".canvasMarkdown ul {
padding-left: 0;
}

.canvasMarkdown li {
font-size: 12px;
color: #EFEFEF;
list-style: none;
display: inline-block;
margin-right: 1em;
padding-right: 1em;
border-right: 1px solid #EFEFEF;
}

.canvasMarkdown li:last-child {
border-right: none;
padding-right: 0;
margin-right: 0;"

image dataurl={asset "asset-cbd3f0ff-9fa3-4b67-beae-60aa5b1cb528"} mode="contain"
| render

image dataurl={asset "asset-94ff6388-1dee-441d-9f0c-c527c57c57e7"} mode="contain"
| render

image dataurl={asset "asset-877ee78a-ae2d-47fb-8f8e-35d95899b475"} mode="contain"
| render

Context: #FFF