Skip to content

Commit

Permalink
[release]: v1.0 Metrics Widget - Big Number w/ Aggregation
Browse files Browse the repository at this point in the history
  • Loading branch information
hongkuiw committed Sep 30, 2021
1 parent 3cbff0b commit e85f49a
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 44 deletions.
106 changes: 89 additions & 17 deletions preview/big-number-aggregation/main.js → preview/big-number-breakdown/main.js
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -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" },
Expand All @@ -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 = `
Expand All @@ -40,68 +70,82 @@ 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;
}
.highcharts-metrics-value-prefix {
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;
}
</style>
<figure class="highcharts-figure">
<div id="container"></div>
Expand All @@ -123,7 +167,6 @@ const visObject = {
(queryResponse.fields.dimensions.length == 1 &&
queryResponse.fields.measures.length > 1)
) {
console.error(errorMessage);
return;
}

Expand All @@ -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) => {
Expand All @@ -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) => {
Expand Down Expand Up @@ -195,7 +245,10 @@ const visObject = {
"<br>" +
"<br>" +
"<p class='highcharts-metrics-value-prefix'>" + translateAggregationType(config.aggregation_type) + ": </p>" +
'<p class="highcharts-metrics-value-latest">' + humanReadableNumber(percentageNumber(metricsValueAggregated, config.is_percentage_number),config.is_human_readable) +
'<p class="highcharts-metrics-value-latest">' + config.prefix
+ humanReadableNumber(percentageNumber(metricsValueAggregated, config.is_percentage_number),config.is_human_readable)
+ '<span class="highcharts-metrics-value-suffix">' + config.suffix + '</span>'
+
"</p>",
align: "left",
},
Expand All @@ -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)
}
Expand All @@ -246,7 +308,17 @@ const visObject = {
data: dataSeries,
},
],
tooltip: {
formatter: function() {
return this.series.name + ":" + '<br>' + 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();
},
};
Expand Down
43 changes: 16 additions & 27 deletions preview/big-number-aggregation/util.js → preview/big-number-breakdown/util.js
View file
Original file line number Diff line number Diff line change
@@ -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 = {}
Expand All @@ -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])
})
Expand All @@ -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

Expand All @@ -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);
Expand All @@ -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":
Expand All @@ -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
}
}

0 comments on commit e85f49a

Please sign in to comment.