Feature: add metrics (#223)

* Add metrics, like exposures

* Add metrics to ci-project

* Generate artifacts the right way

* fix js errors

* fix file tree, url, and graph viz

* Add changelog entry

Co-authored-by: Kyle Wigley <kyle@dbtlabs.com>

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Fix non-alphabetical sort of Source Tables in source overview page ([docs#81](https://github.com/dbt-labs/dbt-docs/issues/81), [docs#218](https://github.com/dbt-labs/dbt-docs/pull/218))
 - Add title tag to node elements in tree ([docs#202](https://github.com/dbt-labs/dbt-docs/issues/202), [docs#203](https://github.com/dbt-labs/dbt-docs/pull/203))
 - Account for test rename: `schema` → `generic`, `data` →` singular`. Use `test_metadata` instead of `schema`/`data` tags to differentiate ([docs#216](https://github.com/dbt-labs/dbt-docs/issues/216), [docs#222](https://github.com/dbt-labs/dbt-docs/pull/222))
+- Add metrics ([core#216](https://github.com/dbt-labs/dbt-core/issues/4235), [docs#223](https://github.com/dbt-labs/dbt-docs/pull/223))
 
 Contributors:
 - [@salmonsd](https://github.com/salmonsd) ([docs#218](https://github.com/dbt-labs/dbt-docs/pull/218))

ci-project/.gitignore

@@ -1,3 +1,4 @@
 target/
 dbt_modules/
+dbt_packages/
 logs/

ci-project/dbt_project.yml

@@ -3,10 +3,10 @@ name: 'jaffle_shop'
 version: '0.1'
 config-version: 2
 profile: 'jaffle_shop'
-source-paths: ["models"]
+model-paths: ["models"]
 analysis-paths: ["analysis"]
 test-paths: ["tests"]
-data-paths: ["data"]
+seed-paths: ["data"]
 macro-paths: ["macros"]
 
 target-path: "target"
@@ -15,9 +15,6 @@ clean-targets:
  - "dbt_modules"
  - "logs"
 
-seeds:
- +quote_columns: false
-
 models:
  jaffle_shop:
  +materialized: table

ci-project/models/metrics.yml

@@ -0,0 +1,20 @@
+version: 2
+
+metrics:
+
+ - name: count_orders
+ model: ref('fct_orders')
+ label: "Number of orders"
+ type: count
+ sql: "*"
+ timestamp: order_date
+ time_grains: [day, week, month, year]
+
+ - name: cohorted_lifetime_value
+ model: ref('dim_customers')
+ description: Customer lifetime value, cohorted by first order date
+ label: "Number of orders"
+ type: sum
+ sql: customer_lifetime_value
+ timestamp: first_order
+ time_grains: [week, month, year]

ci-project/packages.yml

@@ -1,4 +1,5 @@
 
 packages:
- - package: fishtown-analytics/dbt_utils
- version: 0.7.0
+ - package: dbt-labs/dbt_utils
+ version: 0.7.4b1
+ install-prerelease: true

src/app/components/graph/graph-launcher.js

@@ -153,6 +153,8 @@ angular
  var nodes = graph.showFullGraph('source:' + node.source_name + "." + node.name);
  } else if (node && node.resource_type == 'exposure') {
  var nodes = graph.showFullGraph('exposure:' + node.name);
+ } else if (node && node.resource_type == 'metric') {
+ var nodes = graph.showFullGraph('metric:' + node.name);
  } else {
  var nodes = graph.showFullGraph(node_name);
  }
@@ -166,6 +168,8 @@ angular
  var nodes = graph.showVerticalGraph('source:' + node.source_name + "." + node.name, true);
  } else if (node && node.resource_type == 'exposure') {
  var nodes = graph.showVerticalGraph('exposure:' + node.name, true);
+ } else if (node && node.resource_type == 'metric') {
+ var nodes = graph.showVerticalGraph('metric:' + node.name, true);
  } else {
  var nodes = graph.showVerticalGraph(node.name, true);
  }

src/app/components/model_tree/model_tree.html

@@ -58,6 +58,17 @@
  </ul>
  <br />
  </div>
+
+ <div ng-show="tree.metrics.length > 0">
+ <strong>Metrics</strong>
+ <ul style="display: block">
+ <model-tree-line
+ item="item"
+ resource-type="metric"
+ ng-repeat="item in tree.metrics"></model-tree-line>
+ </ul>
+ <br />
+ </div>
 
  <strong>Projects</strong>
  <ul>

src/app/components/references/index.js

@@ -43,6 +43,8 @@ angular
  return 'Macros';
  } else if (type == 'exposure') {
  return 'Exposures';
+ } else if (type == 'metric') {
+ return 'Metrics';
  } else {
  return 'Nodes';
  }

src/app/docs/index.js

@@ -7,3 +7,4 @@ require('./test');
 require('./macro');
 require('./analysis');
 require('./exposure');
+require('./metric');

src/app/docs/metric.html

@@ -0,0 +1,71 @@
+<style>
+/* TODO */
+.section-target {
+ top: -8em;
+}
+
+.noflex {
+ flex: 0 0 160px !important;
+}
+
+.highlight {
+ color: #24292e;
+ background-color: white;
+}
+
+</style>
+
+<div class='app-scroll'>
+ <div class="app-links app-sticky">
+ <div class="app-title">
+ <div class="app-frame app-pad app-flush-bottom">
+
+ <h1>
+ <span class="break">{{ metric.name }}</span>
+ <small>metric</small>
+
+ <div class='clearfix'></div>
+ </h1>
+
+ </div>
+ </div>
+ <div class="app-frame app-pad-h">
+ <ul class="nav nav-tabs">
+ <li ui-sref-active='active'><a ui-sref="dbt.metric({'#': 'details'})">Details</a></li>
+ <li ui-sref-active='active'><a ui-sref="dbt.metric({'#': 'description'})">Description</a></li>
+ <li ui-sref-active='active' ng-show = "parentsLength != 0"><a ui-sref="dbt.metric({'#': 'depends_on'})">Depends On</a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="app-details">
+ <div class="app-frame app-pad">
+
+ <section class="section">
+ <div class="section-target" id="details"></div>
+ <table-details model="metric" extras="extra_table_fields" />
+ </section>
+
+ <section class="section">
+ <div class="section-target" id="description"></div>
+ <div class="section-content">
+ <h6>Description</h6>
+ <div class="panel">
+ <div class="panel-body">
+ <div ng-if="metric.description" class="model-markdown" marked="metric.description"></div>
+ <div ng-if="!metric.description">This {{ metric.resource_type }} is not currently documented</div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section class="section" ng-show = "parentsLength != 0">
+ <div class="section-target" id="depends_on"></div>
+ <div class="section-content">
+ <h6>Depends On</h6>
+ <reference-list references="parents" node="metric" />
+ </div>
+ </section>
+
+ </div>
+ </div>
+</div>

src/app/docs/metric.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const angular = require('angular');
+const dag_utils = require('./dag_utils')
+require("./styles.css");
+
+angular
+.module('dbt')
+.controller('ReportCtrl', ['$scope', '$state', 'project', 'code', '$anchorScroll', '$location',
+ function($scope, $state, projectService, codeService, $anchorScroll, $location) {
+
+ $scope.model_uid = $state.params.unique_id;
+ $scope.project = projectService;
+
+ $scope.codeService = codeService;
+ $scope.extra_table_fields = [];
+ $scope.versions = {};
+
+ $scope.metric = {};
+ projectService.ready(function(project) {
+ let metric = project.nodes[$scope.model_uid];
+ $scope.metric = metric;
+ $scope.parents = dag_utils.getParents(project, metric);
+ $scope.parentsLength = $scope.parents.length;
+
+ //$scope.extra_table_fields = []
+ })
+}]);

src/app/graph/index.js

@@ -21,6 +21,8 @@ angular
  return 'source:' + node.source_name + "." + node.name;
  } else if (node && node.resource_type == 'exposure') {
  return 'exposure:' + node.name;
+ } else if (node && node.resource_type == 'metric') {
+ return 'metric:' + node.name;
  } else if (node.name) {
  return node.name;
  } else {

src/app/index.routes.js

@@ -17,6 +17,7 @@ const templates = {
  analysis: require('./docs/analysis.html'),
  macro: require('./docs/macro.html'),
  exposure: require('./docs/exposure.html'),
+ metric: require('./docs/metric.html'),
 }
 
 angular
@@ -123,4 +124,12 @@ angular
  unique_id: {type: 'string'}
  },
  })
+ .state('dbt.metric', {
+ url: 'metric/:unique_id?section&' + graph_params,
+ controller: 'ReportCtrl',
+ templateUrl: templates.metric,
+ params: {
+ unique_id: {type: 'string'}
+ },
+ })
 }])

src/app/main/index.js

@@ -88,6 +88,7 @@ angular
  $scope.tree.project = tree.project;
  $scope.tree.sources = tree.sources;
  $scope.tree.exposures = tree.exposures;
+ $scope.tree.metrics = tree.metrics;
 
  setTimeout(function() {
  scrollToSelectedModel($scope.model_uid);

src/app/services/graph.service.js

@@ -185,6 +185,12 @@ angular
  'background-color': '#ff694b',
  }
  },
+ {
+ selector: 'node[resource_type="metric"]',
+ style: {
+ 'background-color': '#ff5688',
+ }
+ },
  {
  selector: 'node[selected=1]',
  style: {
@@ -329,7 +335,7 @@ angular
 
 
  _.each(_.filter(service.manifest.nodes, function(node) {
- var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis', 'exposure'], node.resource_type);
+ var is_graph_type = _.includes(['model', 'seed', 'source', 'snapshot', 'analysis', 'exposure', 'metric'], node.resource_type);
  var is_singular_test = node.resource_type == 'test' && !node.hasOwnProperty('test_metadata');
  return is_graph_type || is_singular_test;
  }), function(node) {

src/app/services/node_selection_service.js

@@ -20,6 +20,7 @@ angular
  'test',
  'analysis',
  'exposure',
+ 'metric',
  ],
  depth: 1,
  };
@@ -35,7 +36,7 @@ angular
  options: {
  packages: [],
  tags: [null],
- resource_types: ['model', 'seed', 'snapshot', 'source', 'test', 'analysis', 'exposure'],
+ resource_types: ['model', 'seed', 'snapshot', 'source', 'test', 'analysis', 'exposure', 'metric'],
  }
  };
 
@@ -57,6 +58,8 @@ angular
  include_selection = '+source:' + node.source_name + "." + node.name + '+';
  } else if (node && node.resource_type == 'exposure') {
  include_selection = '+exposure:' + node.name;
+ } else if (node && node.resource_type == 'metric') {
+ include_selection = '+metric:' + node.name;
  } else if (node && _.includes(['analysis', 'test'], node.resource_type)) {
  include_selection = '+' + node.name;
  } else {
@@ -89,8 +92,8 @@ angular
  if (node.resource_type == 'source') {
  pre += "source:"
  node_name = node.source_name + "." + node.name;
- } else if (node.resource_type == 'exposure') {
- pre += "exposure:"
+ } else if (['exposure', 'metric'].indexOf(node.resource_type) > -1) {
+ pre += node.resource_type + ":"
  node_name = node.name;
  } else {
  node_name = node.name;