Merge pull request #271 from jpmorganchase/date-types

Date types
finos · Oct 9, 2018 · f087c2b · f087c2b
2 parents 1090230 + 7d0f872
commit f087c2b
Show file tree

Hide file tree

Showing 17 changed files with 211 additions and 71 deletions.
diff --git a/packages/perspective-viewer-highcharts/src/js/config.js b/packages/perspective-viewer-highcharts/src/js/config.js
@@ -14,8 +14,8 @@ export function set_boost(config, series, ...types) {
     if (count > 5000) {
         Object.assign(config, {
             boost: {
-                useGPUTranslations: types.indexOf("date") === -1,
-                usePreAllocated: types.indexOf("date") === -1
+                useGPUTranslations: types.indexOf("datetime") === -1 && types.indexOf("date") === -1,
+                usePreAllocated: types.indexOf("datetime") === -1 && types.indexOf("date") === -1
             }
         });
         config.plotOptions.series.boostThreshold = 1;
@@ -40,7 +40,7 @@ export function set_both_axis(config, axis, name, type, tree_type, top) {
 
 export function set_axis(config, axis, name, type) {
     let opts = {
-        type: type === "date" ? "datetime" : undefined,
+        type: ["datetime", "date"].indexOf(type) > -1 ? "datetime" : undefined,
         startOnTick: false,
         endOnTick: false,
         title: {
@@ -55,7 +55,7 @@ export function set_axis(config, axis, name, type) {
 }
 
 export function set_category_axis(config, axis, type, top) {
-    if (type === "date") {
+    if (type === "datetime") {
         Object.assign(config, {
             [axis]: {
                 categories: top.categories.map(x => new Date(x).toLocaleString("en-us", {year: "numeric", month: "numeric", day: "numeric", hour: "numeric", minute: "numeric"})),
@@ -65,6 +65,16 @@ export function set_category_axis(config, axis, type, top) {
                 }
             }
         });
+    } else if (type === "date") {
+        Object.assign(config, {
+            [axis]: {
+                categories: top.categories.map(x => new Date(x).toLocaleString("en-us", {year: "numeric", month: "numeric", day: "numeric"})),
+                labels: {
+                    enabled: top.categories.length > 0,
+                    autoRotation: [-5]
+                }
+            }
+        });
     } else {
         let opts = {
             categories: top.categories,

diff --git a/packages/perspective-viewer-highcharts/src/js/tooltip.js b/packages/perspective-viewer-highcharts/src/js/tooltip.js
@@ -144,8 +144,10 @@ function value_exists(value) {
 }
 
 function format_value(value, type) {
-    if (type === "date") {
+    if (type === "datetime") {
         return new Date(value).toLocaleString();
+    } else if (type === "date") {
+        return new Date(value).toLocaleString("en-us", {year: "numeric", month: "numeric", day: "numeric"});
     } else if (type === "float" || type === "integer") {
         return format_number(value, type);
     } else {

diff --git a/packages/perspective-viewer-hypergrid/src/js/hypergrid.js b/packages/perspective-viewer-hypergrid/src/js/hypergrid.js
@@ -235,7 +235,7 @@ bindTemplate(TEMPLATE)(
                 const integer_formatter = null_formatter(new this.grid.localization.NumberFormatter("en-US", {}));
                 this.grid.localization.add("FinanceInteger", integer_formatter);
 
-                const date_formatter = null_formatter(
+                const datetime_formatter = null_formatter(
                     new this.grid.localization.DateFormatter("en-us", {
                         week: "numeric",
                         year: "numeric",
@@ -247,12 +247,24 @@ bindTemplate(TEMPLATE)(
                     }),
                     -1
                 );
+
+                const date_formatter = null_formatter(
+                    new this.grid.localization.DateFormatter("en-us", {
+                        week: "numeric",
+                        year: "numeric",
+                        month: "numeric",
+                        day: "numeric"
+                    }),
+                    -1
+                );
+                this.grid.localization.add("FinanceDatetime", datetime_formatter);
                 this.grid.localization.add("FinanceDate", date_formatter);
 
                 this.grid.localization.add("FinanceTree", {
                     format: function(val, type) {
                         const f = {
                             date: date_formatter,
+                            datetime: datetime_formatter,
                             integer: integer_formatter,
                             float: float_formatter
                         }[type];

diff --git a/packages/perspective-viewer-hypergrid/src/js/perspective-plugin.js b/packages/perspective-viewer-hypergrid/src/js/perspective-plugin.js
@@ -92,6 +92,9 @@ function setColumnPropsByType(column) {
         case "date":
             props.format = "FinanceDate";
             break;
+        case "datetime":
+            props.format = "FinanceDatetime";
+            break;
         default:
             if (column.index === this.treeColumnIndex) {
                 props.format = "FinanceTree";

diff --git a/packages/perspective-viewer/src/js/computed_column.js b/packages/perspective-viewer/src/js/computed_column.js
@@ -42,15 +42,15 @@ const hour_bucket = function(val) {
     let date = new Date(val);
     date.setMinutes(0);
     date.setSeconds(0);
-    return +date;
+    return date;
 };
 
 const day_bucket = function(val) {
     let date = new Date(val);
     date.setHours(0);
     date.setMinutes(0);
     date.setSeconds(0);
-    return +date;
+    return date;
 };
 
 const week_bucket = function(val) {
@@ -61,7 +61,7 @@ const week_bucket = function(val) {
     date.setMinutes(0);
     date.setSeconds(0);
     date.setDate(diff);
-    return +date;
+    return date;
 };
 
 const month_bucket = function(val) {
@@ -70,17 +70,17 @@ const month_bucket = function(val) {
     date.setMinutes(0);
     date.setSeconds(0);
     date.setDate(1);
-    return +date;
+    return date;
 };
 
 export const COMPUTATIONS = {
-    hour_of_day: new Computation("hour_of_day", "date", "integer", hour_of_day),
-    day_of_week: new Computation("day_of_week", "date", "string", day_of_week),
-    month_of_year: new Computation("month_of_year", "date", "string", month_of_year),
-    hour_bucket: new Computation("hour_bucket", "date", "date", hour_bucket),
-    day_bucket: new Computation("day_bucket", "date", "date", day_bucket),
-    week_bucket: new Computation("week_bucket", "date", "date", week_bucket),
-    month_bucket: new Computation("month_bucket", "date", "date", month_bucket),
+    hour_of_day: new Computation("hour_of_day", "datetime", "integer", hour_of_day),
+    day_of_week: new Computation("day_of_week", "datetime", "string", day_of_week),
+    month_of_year: new Computation("month_of_year", "datetime", "string", month_of_year),
+    hour_bucket: new Computation("hour_bucket", "datetime", "datetime", hour_bucket),
+    day_bucket: new Computation("day_bucket", "datetime", "date", day_bucket),
+    week_bucket: new Computation("week_bucket", "datetime", "date", week_bucket),
+    month_bucket: new Computation("month_bucket", "datetime", "date", month_bucket),
     uppercase: new Computation("uppercase", "string", "string", x => x.toUpperCase()),
     lowercase: new Computation("lowercase", "string", "string", x => x.toLowerCase()),
     length: new Computation("length", "string", "integer", x => x.length),
@@ -107,7 +107,7 @@ class ComputedColumn extends HTMLElement {
             integer: "123",
             string: "abc",
             boolean: "t/f",
-            date: "mdy"
+            datetime: "mdy"
         };
     }
 
@@ -329,7 +329,11 @@ class ComputedColumn extends HTMLElement {
 
         const index = Number.parseInt(target.getAttribute("data-index"));
 
-        if ((computation_type !== "float" && type !== computation_type) || (computation_type === "float" && type !== "float" && type !== "integer")) {
+        if (
+            (computation_type !== "float" && computation_type !== "datetime" && type !== computation_type) ||
+            (computation_type === "float" && type !== "float" && type !== "integer") ||
+            (computation_type === "datetime" && type !== "datetime" && type !== "date")
+        ) {
             this._register_inputs();
             this.state.errors.input_column = `Input column type (${type}) must match computation input type (${computation_type}).`;
             this._set_error_message("input_column", this._input_column_error_message);

diff --git a/packages/perspective-viewer/src/js/row.js b/packages/perspective-viewer/src/js/row.js
@@ -94,8 +94,12 @@ class Row extends HTMLElement {
                 filter_dropdown.innerHTML = perspective.TYPE_FILTERS.boolean.map(agg => `<option value="${agg}">${agg}</option>`).join("");
                 break;
             case "date":
-                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.date.map(agg => `<option value="${agg}">${agg}</option>`).join("");
-                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.date.map(agg => `<option value="${agg}">${agg}</option>`).join("");
+                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
+                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
+                break;
+            case "datetime":
+                agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
+                filter_dropdown.innerHTML = perspective.TYPE_FILTERS.datetime.map(agg => `<option value="${agg}">${agg}</option>`).join("");
                 break;
             case "string":
                 agg_dropdown.innerHTML = perspective.TYPE_AGGREGATES.string.map(agg => `<option value="${agg}">${agg}</option>`).join("");

diff --git a/packages/perspective-viewer/src/js/view.js b/packages/perspective-viewer/src/js/view.js
@@ -361,7 +361,7 @@ async function loadTable(table, redraw = true) {
         this.setAttribute("columns", JSON.stringify(this._initial_col_order));
     }
 
-    let type_order = {integer: 2, string: 0, float: 3, boolean: 4, date: 1};
+    let type_order = {integer: 2, string: 0, float: 3, boolean: 4, datetime: 1};
 
     // Sort columns by type and then name
     cols.sort((a, b) => {

diff --git a/packages/perspective-viewer/src/less/computed_column.less b/packages/perspective-viewer/src/less/computed_column.less
@@ -185,6 +185,12 @@ perspective-computed-column {
             color: #999999;
         }
 
+        &.datetime::before {
+            .column_row();
+            content: "mdy";
+            color: #999999;
+        }
+
         &.date::before {
             .column_row();
             content: "mdy";
@@ -252,7 +258,7 @@ perspective-computed-column {
         text-align: center;
         padding-top: 4px;
 
-        .date,
+        .datetime,
         .boolean {
             color: #999;
         }

diff --git a/packages/perspective-viewer/src/less/default.less b/packages/perspective-viewer/src/less/default.less
@@ -268,6 +268,12 @@ perspective-viewer {
             color: #999999;
         }
 
+        .datetime::before {
+            .column_row();
+            content: "mdy";
+            color: #999999;
+        }
+
         .date::before {
             .column_row();
             content: "mdy";

diff --git a/packages/perspective-viewer/src/less/material.less b/packages/perspective-viewer/src/less/material.less
@@ -154,7 +154,8 @@ perspective-viewer #app {
         &.string:before,
         &.float:before,
         &.integer:before,
-        &.date:before {
+        &.date:before,
+        &.datetime:before {
             font-family: @material-monospace-fonts;
             padding-left: 0;
         }
@@ -190,6 +191,11 @@ perspective-viewer #app {
         content: "t/f";
     }
 
+    #side_panel perspective-row .datetime::before {
+        .column_row();
+        content: "mdy";
+    }
+
     #side_panel perspective-row .date::before {
         .column_row();
         content: "mdy";

diff --git a/packages/perspective-viewer/src/less/row.less b/packages/perspective-viewer/src/less/row.less
@@ -228,6 +228,11 @@ perspective-row {
     content: "mdy";
 }
 
+#side_panel perspective-row .datetime::before {
+    .column_row();
+    content: "mdy";
+}
+
 perspective-row #column_aggregate {
     display: none;
     font-size: 10px;

diff --git a/packages/perspective-viewer/test/js/computed_column_tests.js b/packages/perspective-viewer/test/js/computed_column_tests.js
@@ -13,7 +13,7 @@ const add_computed_column = async page => {
     await page.evaluate(element => element.setAttribute("columns", '["Row ID","Quantity"]'), viewer);
     await page.click("#add-computed-column");
     await page.$eval("perspective-computed-column", element => {
-        const columns = [{name: "Order Date", type: "date"}];
+        const columns = [{name: "Order Date", type: "datetime"}];
         element._apply_state(columns, element.computations["day_of_week"], "new_cc");
     });
     await page.click("#psp-cc-button-save");