<link href="https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css" rel="stylesheet" />
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div id="wdr-component"></div>
<div class="snowflake-area">
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
  <div class="snowflake">❄️</div>
</div>

.wdr-component {
  position: relative;
  width: 100%;
  height: 100%;
}

.snowflake {
  position: absolute;
  top: -5%;
  font-size: 2rem;
  animation: fall linear infinite;
  opacity: 0.8;
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
  }
}

.snowflake:nth-child(1) {
  left: 10%;
  animation-duration: 5s;
}
.snowflake:nth-child(2) {
  left: 20%;
  animation-duration: 3s;
  font-size: 1.5rem;
}
.snowflake:nth-child(3) {
  left: 30%;
  animation-duration: 6s;
  font-size: 2.5rem;
}
.snowflake:nth-child(4) {
  left: 40%;
  animation-duration: 4s;
}
.snowflake:nth-child(5) {
  left: 50%;
  animation-duration: 7s;
  font-size: 2rem;
}
.snowflake:nth-child(6) {
  left: 60%;
  animation-duration: 4.5s;
  font-size: 2.2rem;
}
.snowflake:nth-child(7) {
  left: 70%;
  animation-duration: 6.5s;
}
.snowflake:nth-child(8) {
  left: 80%;
  animation-duration: 3.5s;
  font-size: 1.8rem;
}
.snowflake:nth-child(9) {
  left: 90%;
  animation-duration: 5.5s;
}
.snowflake:nth-child(10) {
  left: 95%;
  animation-duration: 4s;
  font-size: 2.3rem;
}

var pivot = new WebDataRocks({
  container: "wdr-component",
  toolbar: true,
  report: {
    dataSource: {
      data: getData()
    },
    slice: {
      rows: [
        {
          uniqueName: "date"
        }
      ],
      columns: [
        {
          uniqueName: "Measures"
        }
      ],
      measures: [
        {
          uniqueName: "actual_min_temp",
          aggregation: "sum",
          format: "temp"
        },
        {
          uniqueName: "record_min_temp",
          aggregation: "sum",
          format: "temp"
        },
        {
          uniqueName: "record_precipitation",
          aggregation: "sum",
          format: "precipitation"
        },
        {
          uniqueName: "average_precipitation",
          aggregation: "sum",
          format: "precipitation"
        }
      ],
      sorting: {
        column: {
          type: "asc",
          tuple: [],
          measure: "record_min_temp"
        }
      }
    },
    options: {
      grid: {
        title: "Weather in New York",
        showTotals: "off",
        showGrandTotals: "off"
      },
      datePattern: "MMM d yyyy",
      showAggregationLabels: false
    },
    formats: [
      {
        name: "temp",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        currencySymbol: "°F",
        currencySymbolAlign: "right",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      },
      {
        name: "precipitation",
        thousandsSeparator: " ",
        decimalSeparator: ".",
        currencySymbol: "”",
        currencySymbolAlign: "right",
        nullValue: "",
        textAlign: "right",
        isPercent: false
      }
    ]
  }
});

function getData() {
  return [
    {
      date: {
        caption: "Date",
        type: "date string"
      },
      actual_mean_temp: {
        caption: "Actual Mean Temp",
        type: "number"
      },
      actual_min_temp: {
        caption: "Actual Min Temp",
        type: "number"
      },
      actual_max_temp: {
        caption: "Actual Max Temp",
        type: "number"
      },
      average_min_temp: {
        caption: "Average Min Temp",
        type: "number"
      },
      average_max_temp: {
        caption: "Average Max Temp",
        type: "number"
      },
      record_min_temp: {
        caption: "Record Min Temp",
        type: "number"
      },
      record_max_temp: {
        caption: "Record Max Temp",
        type: "number"
      },
      record_min_temp_year: {
        caption: "Record Min Temp Year",
        type: "number"
      },
      record_max_temp_year: {
        caption: "Record Max Temp Year",
        type: "number"
      },
      actual_precipitation: {
        caption: "Actual Precipitation",
        type: "number"
      },
      average_precipitation: {
        caption: "Average Precipitation",
        type: "number"
      },
      record_precipitation: {
        caption: "Record Precipitation",
        type: "number"
      }
    },
    ["2014-12-01", 54, 42, 65, 37, 48, 9, 70, 1875, 2006, 0.09, 0.14, 1.72],
    ["2014-12-02", 39, 35, 43, 37, 48, 12, 66, 1875, 1970, 0.08, 0.14, 2.16],
    ["2014-12-03", 44, 41, 46, 36, 47, 9, 69, 1976, 1998, 0.06, 0.15, 1.63],
    ["2014-12-04", 41, 37, 45, 36, 47, 10, 74, 1882, 1998, 0, 0.14, 1.84],
    ["2014-12-05", 39, 34, 44, 35, 47, 11, 70, 1926, 2001, 0.51, 0.14, 1.28],
    ["2014-12-06", 45, 39, 50, 35, 46, 11, 71, 1871, 2001, 1.22, 0.13, 1.6],
    ["2014-12-07", 36, 30, 42, 35, 46, 10, 75, 1926, 1998, 0.04, 0.14, 1.98],
    ["2014-12-08", 31, 24, 37, 34, 45, 10, 65, 1882, 1927, 0, 0.14, 1.54],
    ["2014-12-09", 39, 36, 42, 34, 45, 7, 66, 1876, 1966, 2.54, 0.13, 2.54],
    ["2014-12-10", 36, 32, 40, 34, 45, 3, 70, 1876, 1946, 0.08, 0.14, 1.62],
    ["2014-12-11", 35, 31, 38, 33, 44, 6, 64, 1880, 1879, 0.01, 0.14, 2.41],
    ["2014-12-12", 35, 32, 38, 33, 44, 5, 68, 1988, 1931, 0, 0.13, 1.6],
    ["2014-12-13", 39, 34, 44, 33, 44, 8, 64, 1960, 1923, 0, 0.13, 3.03],
    ["2014-12-14", 42, 38, 46, 32, 43, 12, 67, 1976, 1881, 0, 0.13, 2.22],
    ["2014-12-15", 43, 37, 48, 32, 43, 6, 67, 1874, 2008, 0, 0.13, 1.34],
    ["2014-12-16", 44, 38, 49, 32, 43, 7, 63, 1876, 1971, 0.2, 0.12, 2.25],
    ["2014-12-17", 48, 42, 54, 32, 42, 1, 62, 1919, 2000, 0.02, 0.13, 2.28],
    ["2014-12-18", 40, 37, 42, 31, 42, -1, 63, 1919, 1984, 0, 0.12, 1.3],
    ["2014-12-19", 35, 31, 38, 31, 42, -1, 58, 1884, 1931, 0, 0.12, 1.58],
    ["2014-12-20", 32, 30, 33, 31, 42, -4, 60, 1942, 2002, 0, 0.12, 1.82],
    ["2014-12-21", 34, 31, 36, 30, 41, -1, 65, 1942, 2013, 0, 0.13, 2.49],
    ["2014-12-22", 40, 35, 44, 30, 41, 2, 71, 1872, 2013, 0.04, 0.12, 2.18],
    ["2014-12-23", 45, 43, 46, 30, 41, -1, 66, 1883, 1990, 0.16, 0.13, 1.61],
    ["2014-12-24", 51, 44, 58, 30, 41, 6, 63, 1983, 1996, 0.8, 0.13, 1.42],
    ["2014-12-25", 53, 44, 62, 29, 40, -1, 64, 1980, 1982, 0.09, 0.13, 1.3],
    ["2014-12-26", 45, 40, 50, 29, 40, 3, 63, 1914, 1982, 0, 0.12, 1.66],
    ["2014-12-27", 50, 44, 55, 29, 40, 6, 63, 1872, 1949, 0, 0.12, 2.14],
    ["2014-12-28", 49, 43, 54, 29, 40, 8, 65, 1917, 1982, 0.1, 0.12, 1.35],
    ["2014-12-29", 39, 34, 44, 28, 39, -6, 70, 1917, 1984, 0, 0.11, 2.52],
    ["2014-12-30", 31, 28, 34, 28, 39, -13, 65, 1917, 1984, 0, 0.12, 1.69],
    ["2014-12-31", 30, 27, 32, 28, 39, -7, 63, 1917, 1965, 0, 0.11, 2.31],
    ["2015-01-01", 33, 27, 39, 28, 39, -4, 62, 1918, 1966, 0, 0.12, 2.05],
    ["2015-01-02", 39, 35, 42, 28, 39, 2, 68, 1918, 1876, 0, 0.12, 1.92],
    ["2015-01-03", 38, 33, 42, 28, 39, -4, 64, 1879, 2000, 0.71, 0.12, 2.42],
    ["2015-01-04", 49, 41, 56, 27, 39, -3, 66, 1918, 1950, 0.3, 0.12, 2.73],
    ["2015-01-05", 35, 21, 49, 27, 38, -4, 64, 1904, 1993, 0, 0.12, 1.5],
    ["2015-01-06", 21, 19, 22, 27, 38, -2, 72, 1896, 2007, 0.05, 0.13, 1.65],
    ["2015-01-07", 16, 9, 23, 27, 38, 4, 64, 2014, 1907, 0, 0.12, 2.67],
    ["2015-01-08", 15, 8, 21, 27, 38, 2, 65, 1968, 1998, 0, 0.11, 1.25],
    ["2015-01-09", 26, 19, 33, 27, 38, -1, 64, 1968, 1937, 0.07, 0.13, 1.42],
    ["2015-01-10", 20, 16, 23, 27, 38, -6, 60, 1875, 1876, 0, 0.12, 1.72],
    ["2015-01-11", 28, 18, 37, 27, 38, 3, 63, 1968, 1975, 0, 0.12, 1.46],
    ["2015-01-12", 37, 35, 39, 27, 38, 2, 64, 1981, 1890, 0.36, 0.13, 2.35],
    ["2015-01-13", 27, 17, 36, 27, 38, -3, 68, 1914, 1932, 0, 0.12, 1.44],
    ["2015-01-14", 24, 16, 32, 27, 38, -5, 70, 1914, 1932, 0, 0.12, 2.06],
    ["2015-01-15", 30, 25, 35, 27, 38, 0, 67, 1957, 1932, 0, 0.13, 1.27],
    ["2015-01-16", 32, 20, 43, 27, 38, 1, 58, 2004, 1995, 0, 0.12, 1.44],
    ["2015-01-17", 25, 17, 32, 27, 38, -2, 63, 1977, 1990, 0, 0.12, 1.36],
    ["2015-01-18", 37, 31, 42, 27, 38, 0, 66, 1982, 1990, 2.1, 0.11, 2.1],
    ["2015-01-19", 39, 36, 42, 27, 38, -3, 64, 1875, 1951, 0, 0.12, 2.39],
    ["2015-01-20", 36, 32, 40, 27, 38, 0, 61, 1994, 2006, 0, 0.11, 1.41],
    ["2015-01-21", 31, 25, 36, 27, 38, -2, 63, 1985, 2006, 0, 0.12, 3.45],
    ["2015-01-22", 36, 31, 40, 27, 38, 0, 61, 1888, 1959, 0, 0.12, 1.7],
    ["2015-01-23", 34, 28, 39, 27, 38, -3, 62, 1936, 1906, 0, 0.11, 2.55],
    ["2015-01-24", 36, 33, 39, 27, 38, -6, 68, 1882, 1967, 0.72, 0.11, 2.18],
    ["2015-01-25", 37, 31, 42, 27, 38, 2, 60, 1945, 1967, 0, 0.11, 1.8],
    ["2015-01-26", 27, 22, 31, 27, 39, 3, 72, 1927, 1950, 0.48, 0.11, 2.19],
    ["2015-01-27", 25, 20, 30, 27, 39, -1, 69, 1927, 1916, 0.36, 0.11, 1.94],
    ["2015-01-28", 25, 16, 34, 27, 39, -2, 66, 1925, 1916, 0, 0.11, 1.87],
    ["2015-01-29", 28, 19, 36, 27, 39, 0, 69, 1873, 2002, 0.02, 0.11, 1.03],
    ["2015-01-30", 29, 19, 38, 27, 39, 2, 64, 1873, 2006, 0.06, 0.11, 1.19],
    ["2015-01-31", 20, 13, 26, 27, 39, -1, 63, 1920, 1947, 0, 0.12, 1.51],
    ["2015-02-01", 28, 20, 36, 27, 39, -2, 67, 1920, 1989, 0.03, 0.11, 2.12],
    ["2015-02-02", 24, 14, 34, 27, 39, -3, 59, 1881, 1988, 1.02, 0.11, 2.98],
    ["2015-02-03", 20, 13, 26, 27, 39, 0, 64, 1955, 1991, 0, 0.11, 1.55],
    ["2015-02-04", 34, 24, 43, 28, 40, 0, 68, 1918, 1991, 0, 0.1, 2.1],
    ["2015-02-05", 28, 14, 42, 28, 40, -6, 70, 1918, 1991, 0, 0.11, 1.43],
    ["2015-02-06", 20, 12, 27, 28, 40, -4, 68, 1895, 2008, 0, 0.11, 2.74],
    ["2015-02-07", 33, 25, 40, 28, 40, 1, 54, 1910, 1938, 0.02, 0.11, 2.96],
    ["2015-02-08", 33, 29, 37, 28, 40, -7, 61, 1934, 1965, 0, 0.11, 1.15],
    ["2015-02-09", 27, 25, 29, 28, 40, -15, 63, 1934, 1990, 0.09, 0.1, 1.74],
    ["2015-02-10", 33, 26, 40, 28, 41, -6, 61, 1899, 2001, 0.01, 0.11, 2.63],
    ["2015-02-11", 28, 22, 34, 28, 41, -2, 65, 1899, 1960, 0, 0.1, 2.74],
    ["2015-02-12", 28, 16, 40, 28, 41, -3, 62, 1914, 1999, 0, 0.11, 1.66],
    ["2015-02-13", 15, 8, 21, 29, 41, -1, 64, 1914, 1951, 0, 0.1, 2.42],
    ["2015-02-14", 24, 16, 32, 29, 41, 2, 63, 1916, 1946, 0.02, 0.11, 1.59],
    ["2015-02-15", 15, 4, 25, 29, 42, -8, 73, 1943, 1949, 0, 0.1, 1.73],
    ["2015-02-16", 12, 3, 21, 29, 42, 1, 71, 1888, 1954, 0, 0.12, 1.4],
    ["2015-02-17", 21, 14, 27, 29, 42, -5, 67, 1896, 1976, 0.14, 0.11, 1.49],
    ["2015-02-18", 26, 19, 33, 29, 42, 0, 68, 1979, 1981, 0, 0.11, 1.5],
    ["2015-02-19", 18, 8, 27, 30, 42, 1, 66, 1936, 1997, 0, 0.11, 2.15],
    ["2015-02-20", 11, 2, 19, 30, 43, 2, 69, 2015, 1939, 0, 0.11, 3.07],
    ["2015-02-21", 23, 13, 32, 30, 43, 4, 68, 1896, 1930, 0.61, 0.11, 1.86],
    ["2015-02-22", 38, 32, 43, 30, 43, 8, 69, 1963, 1997, 0.1, 0.11, 2.39],
    ["2015-02-23", 23, 8, 38, 30, 43, 5, 70, 1889, 1985, 0, 0.12, 1.38],
    ["2015-02-24", 14, 4, 24, 30, 44, -4, 75, 1873, 1985, 0, 0.12, 1.69],
    ["2015-02-25", 29, 20, 37, 31, 44, 1, 75, 1914, 1930, 0, 0.11, 2.11],
    ["2015-02-26", 27, 21, 32, 31, 44, 7, 65, 1990, 1890, 0, 0.12, 1.87],
    ["2015-02-27", 24, 18, 30, 31, 44, 5, 72, 1900, 1997, 0, 0.12, 1.56],
    ["2015-02-28", 21, 13, 29, 31, 45, 5, 67, 1934, 1976, 0, 0.12, 1.21]
  ];
}