From e85f49ac170bea515db6639f6c4153fe402488d9 Mon Sep 17 00:00:00 2001 From: hongkuiw <85293785+hongkuiw@users.noreply.github.com> Date: Thu, 30 Sep 2021 14:55:09 -0400 Subject: [PATCH] [release]: v1.0 Metrics Widget - Big Number w/ Aggregation --- .../main.js | 106 +++++++++++++++--- .../util.js | 43 +++---- 2 files changed, 105 insertions(+), 44 deletions(-) rename preview/{big-number-aggregation => big-number-breakdown}/main.js (64%) rename preview/{big-number-aggregation => big-number-breakdown}/util.js (81%) diff --git a/preview/big-number-aggregation/main.js b/preview/big-number-breakdown/main.js similarity index 64% rename from preview/big-number-aggregation/main.js rename to preview/big-number-breakdown/main.js index a1e38cf..35f7fa5 100755 --- a/preview/big-number-aggregation/main.js +++ b/preview/big-number-breakdown/main.js @@ -1,3 +1,6 @@ +// ANCHOR: Global Input Parameters +// NOTE: this is the naming to follow in .lkml + const inputDimensionBreakdownNameLookML = "_breakdown"; const { tidy, select, distinct, arrange, desc } = Tidy; @@ -19,10 +22,15 @@ const visObject = { label: "3. Toggle for Percentage Number", default: false, }, + is_showing_data_label: { + type: "boolean", + label: "4 Toggle for Show Data Label", + default: true, + }, aggregation_type: { type: "string", display: "select", - label: "4. Select Aggregation Type", + label: "5. Select Aggregation Type", default: "sum", values: [ { sum: "sum" }, @@ -32,6 +40,28 @@ const visObject = { { median: "median" }, ], }, + prefix: { + type: "string", + display: "text", + label: "6. Prefix of Metrics", + default: "" + }, + suffix: { + type: "string", + display: "text", + label: "7. Suffix of Metrics", + default: "" + }, + orientation: { + type: "string", + display: "select", + label: "8. Orientation", + default: "bar", + values: [ + {horizontal: "bar"}, + {vertical: "column"} + ] + } }, create: function (element, config) { element.innerHTML = ` @@ -40,61 +70,63 @@ const visObject = { height: 90%; width: 90%; position: absolute; - // fully responsiveness } .highcharts-figure #container:hover { } .highcharts-figure #container .highcharts-container { - // border-radius: 20px; - // filter: drop-shadow(2px 2px 2px #999999); } - .highcharts-title { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + .highcharts-title { + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; color: "#181818"; font-size: 24px !important; margin-bottom: 10px; + font-weight: 400; } .highcharts-metrics-value-latest { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; color: "#181818"; font-size: 50px; - font-weight: 600; line-height: 52px; } .highcharts-subtitle { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; color: "#181818"; font-size: 14px; } .highcharts-subtitle text { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; color: "#181818"; font-size: 14px; fill: #999999 !important; } .highcharts-axis-title { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; + } + + .highcharts-axis-labels { + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; } .highcharts-axis-labels .highcharts-yaxis-labels { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; fill: #999999 !important; } .highcharts-axis-labels .highcharts-xaxis-labels { - font-family: "Circular Spotify Text", Helvetica, Arial, sans-serif; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; fill: #999999 !important; } .highcharts-metrics-by { font-size: 14px; font-style: italic; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; fill: #999999 !important; } @@ -102,6 +134,18 @@ const visObject = { font-size: 14px; font-style: Italic; } + + .highcharts-metrics-value-suffix { + font-size: 14px; + font-style: italic; + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; + fill: #999999 !important; + } + + .highcharts-data-label { + font-family: "Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif; + font-weight: 200; + }
@@ -123,7 +167,6 @@ const visObject = { (queryResponse.fields.dimensions.length == 1 && queryResponse.fields.measures.length > 1) ) { - console.error(errorMessage); return; } @@ -137,13 +180,20 @@ const visObject = { dimensionMetaInfoValue = getFieldMetaInfoValue(queryResponse, dimensionName); breakdownName = dimensionMetaInfoValue[0].label_short; breakdownDescription = dimensionMetaInfoValue[0].description; + var measureName = queryResponse.fields.measures[0].name; + measureMetaInfoValue = getFieldMetaInfoValue(queryResponse, measureName); + metricsTitle = measureMetaInfoValue[0].label_short; chartTitle = metricsTitle; + dataRecordsSortDescending = tidy(dataRecords, arrange((a, b) => b.measureName - a.measureName)); + var numberBreakdowns = dataRecordsSortDescending.length; + var dataHighCharts = generateHighChartsDataSeries(dataRecordsSortDescending); + var dataBreakdowns = []; var dataSeries = []; dataHighCharts.forEach((d) => { @@ -158,7 +208,7 @@ const visObject = { zoomType: "x", panning: "true", panKey: "shift", - type: "bar", + type: config.orientation, events: { load: function () { this.title.on("mouseover", (e) => { @@ -195,7 +245,10 @@ const visObject = { "
" + "
" + "

" + translateAggregationType(config.aggregation_type) + ":

" + - '

' + humanReadableNumber(percentageNumber(metricsValueAggregated, config.is_percentage_number),config.is_human_readable) + + '

' + config.prefix + + humanReadableNumber(percentageNumber(metricsValueAggregated, config.is_percentage_number),config.is_human_readable) + + '' + config.suffix + '' + + "

", align: "left", }, @@ -222,7 +275,16 @@ const visObject = { plotOptions: { bar: { dataLabels: { - enabled: true, + enabled: config.is_showing_data_label, + formatter: function() { + return humanReadableNumber(percentageNumber(parseFloat(this.y), config.is_percentage_number),config.is_human_readable) + } + }, + color: config.bar_color + }, + column: { + dataLabels: { + enabled: config.is_showing_data_label, formatter: function() { return humanReadableNumber(percentageNumber(parseFloat(this.y), config.is_percentage_number),config.is_human_readable) } @@ -246,7 +308,17 @@ const visObject = { data: dataSeries, }, ], + tooltip: { + formatter: function() { + return this.series.name + ":" + '
' + humanReadableNumber(percentageNumber(parseFloat(this.y), config.is_percentage_number),config.is_human_readable) + }, + style: { + color: "#000000", + fontFamily: '"Google Sans", Roboto, "Noto Sans JP", "Noto Sans", "Noto Sans CJK KR", Helvetica, Arial, sans-serif' + } + } }); + done(); }, }; diff --git a/preview/big-number-aggregation/util.js b/preview/big-number-breakdown/util.js similarity index 81% rename from preview/big-number-aggregation/util.js rename to preview/big-number-breakdown/util.js index e3ee8d8..3ecb34d 100755 --- a/preview/big-number-aggregation/util.js +++ b/preview/big-number-breakdown/util.js @@ -1,6 +1,4 @@ var generateDataRecords = (dataIndexFormat) => { - //HELP: convert looker response data into common records format - //NOTE: used by metrics-widget__big-number var dataRecords = [] dataIndexFormat.forEach(d=>{ obj = {} @@ -14,13 +12,10 @@ var generateDataRecords = (dataIndexFormat) => { } function generateHighChartsDataSeries(dataRecordsInput) { - //HELP: convert DataRecords into HighChart DataSeries without Header/Column Name - //NOTE: used by metrics-widget__big-number dataHighCharts = [] dataRecordsInput.forEach(function(d) { var rowValueOnly = [] var columnNames = Object.keys(d); - // console.log(columnNames); columnNames.forEach(function(c) { rowValueOnly.push(d[c]) }) @@ -30,10 +25,6 @@ function generateHighChartsDataSeries(dataRecordsInput) { } function getFieldMetaInfoValue(queryResponse, fieldName) { - //HELP: look up meta info of looker fields - // @queryResponse: looker Response - // @fieldName: viewName.fieldTechicalName - // @return: array of metainfo of this field const queryResponseFieldsDimensions = queryResponse.fields.dimensions const queryResponseFieldsMeasures = queryResponse.fields.measures @@ -51,8 +42,6 @@ function getFieldMetaInfoValue(queryResponse, fieldName) { } function calculateAggregatedValue(inputArray1D, aggregationType) { - // HELP - // @aggregationType - String: sum, average, min, max, median switch (aggregationType) { case "sum": return d3.sum(inputArray1D); @@ -75,22 +64,6 @@ function calculateAggregatedValue(inputArray1D, aggregationType) { } } -function humanReadableNumber(value, is_human_readable) { - if (is_human_readable == true) { - return numeral(value).format("0.00a") - } else { - return value - } -} - -function percentageNumber(value, is_percentage_number) { - if (is_percentage_number == true) { - return numeral(value).format("0.00%") - } else { - return value - } -} - function translateAggregationType(aggregationType) { switch (aggregationType) { case "sum": @@ -109,4 +82,20 @@ function translateAggregationType(aggregationType) { return "Median"; break; } +} + +function humanReadableNumber(value, is_human_readable) { + if (is_human_readable == true) { + return numeral(value).format("0.00a") + } else { + return value + } +} + +function percentageNumber(value, is_percentage_number) { + if (is_percentage_number == true) { + return numeral(value).format("0.00%") + } else { + return value + } } \ No newline at end of file