Skip to content

Commit

Permalink
Merge new UI into production branch (#130)
Browse files Browse the repository at this point in the history
* GUD v2 (graph-paper revamp) (#85)

* adds barebones from graph-paper story

* integrates config file

* adds back Logo; further tweaks to menu items; implements cache + querying

* adds Loading Spinner

* finesses error / loading states

* adds calls to action (feedback, shortcuts, docs, file an issue) in Sidebar

* adds esc

* further tweaks to Shortcuts menu

* styling tweaks

* adds back querystring state loading

* updates store to have a no-local querying approach to support transitions within Explore.svelte

* adds back in TimeAxis.svelte

* updates and tweaks some layout pieces

* updates the mouseovers to account for bug fixes (contingent on a new graph-paper PR)

* adds back in caveat system

* adds smoothing option

* adds hash routing for future improvements

* fixes the hashbang routing with query parameteres

* wires up explore body menus to read from querystring

* metric selector; moves some compoinents to src/components/controls

* compartmentalizes the mouse interactions

* adds back in markers

* cleans up modal implementatino

* sidebar tweaks

* adds a few more affordances around YoY + mouseovers; cleans up all menus

* feature-complete

* adds disabledMetrics and disabledDimensions

* makes lists keyboard-accessible

* restyles sidebar in anticipation of multiple views

* migrates to graph-paper 0.0.0-alpha.14

* improves mouseover performance

* further design tweaks

* adds in changes to usage criterion from prototype branch

* adds newer clickOutside action

* reset start and end dates on usage criterion change

* removes extraneous comments

* updates a handful of dependencies

* adds back tooltips into graphs

* adds TitleMenu.svelte component

* Consolidates routing / config information

* adds disabled functionality

* adds rudimeentary scrollIntoView support

* adds CHANGELOG.md

* date picker closes after apply is clicked (#97)

* moves around a few components; fixes DatePicker animation issue (#102)

* moves around a few components; fixes DatePicker animation issue

* collapses DatePicker on reset

* removes buttons in explore when focused on a single metric

* Add basic front-end CI tests (#103)

* ESLint improvements (#105)

* Switch to a Node-based eslint-health script
* Run ESLint against Svelte files

* Update eslint-health.js with small docs changes

* Remove appId labels from Fenix channels (#107)

Should wait until mozilla/bigquery-etl#1245 is merged.

The mapping from Fenix channels to appIds is no longer straight-forward,
so we remove those shortDescription values.

* bugfixes before fbo tomorrow (#111)

* Add Japan to the country list (#114)

Resolves #112

Relies on mozilla/bigquery-etl#1352
to make JP available in the underlying tables.

* Never use "Fennec" for "Firefox for iOS" (#120)

* Remove references to folks no longer involved (#125)

* redirects / to /explore, which fixes future instantiation issues because the route is not codified in the hash. (#124)

* uses labels instead of keys for sidebar and body title (#123)

* Remove usage criteria docs, which are out of date (#126)

This same documentation exists in the UI, so I think it's best
to remove it here.

* Adjust to modified product names (#128)

See mozilla/bigquery-etl#1380

Co-authored-by: Hamilton Ulmer <hamilton.ulmer@gmail.com>
Co-authored-by: John Karahalis <john.karahalis@gmail.com>
  • Loading branch information
3 people committed Jan 6, 2021
1 parent 40b9440 commit 8145549
Show file tree
Hide file tree
Showing 83 changed files with 16,862 additions and 8,324 deletions.
31 changes: 31 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
version: 2
jobs:
frontend-tests:
working_directory: ~/mozilla/gud
docker:
- image: circleci/node:11.5
steps:
- checkout
- run:
name: update-npm
command: 'sudo npm install -g npm@latest'
- restore_cache:
key: dependency-cache-{{ checksum "package-lock.json" }}
- run:
name: install-npm-wee
command: npm install
- save_cache: # special step to save the dependency cache
key: dependency-cache-{{ checksum "package-lock.json" }}
paths:
- ./node_modules
- run: npm run build
- run: node scripts/eslint-health.js

workflows:
version: 2
test-and-deploy:
jobs:
- frontend-tests:
filters:
tags:
only: /.*/
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
!.eslintrc.js

public/bundle.*
docs/js/jquery*.js
67 changes: 61 additions & 6 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,69 @@
module.exports = {
parserOptions: {
ecmaVersion: 2019,
sourceType: "module"
sourceType: "module",
},
env: {
browser: true
browser: true,
es6: true,
},
plugins: ["prettier"],
extends: ["prettier"],
extends: ["airbnb-base"],
plugins: ["jest", "svelte3"],
rules: {
"prettier/prettier": "error"
}
"import/prefer-default-export": "off",
"import/no-extraneous-dependencies": ["error", { devDependencies: true }],
"no-param-reassign": [
"error",
{ props: true, ignorePropertyModificationsFor: ["draft"] },
],
},
overrides: [
{
files: ["**/*.js"],
extends: ["prettier"],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error",
},
},
{
files: ["**/*.svelte"],
processor: "svelte3/svelte3",

// Turn off all rules that might conflict with Prettier.[1] Note that this
// does not warn if a Svelte file disobeys Prettier rules. That's what the
// Prettier *plugin* does, but at the time of this writing, the
// eslint-plugin-svelte3 plugin discourages the use of the Prettier
// plugin for Svelte files.[2]
//
// [1] https://github.com/prettier/eslint-config-prettier
// [2] https://github.com/sveltejs/eslint-plugin-svelte3/blob/6900d670c9e85509b2d21decd91f1e75f7934596/OTHER_PLUGINS.md#eslint-plugin-prettier
extends: ["prettier"],

rules: {
"prefer-const": "off",

// Disable rules that do not work correctly with eslint-plugin-svelte3
//
// https://github.com/sveltejs/eslint-plugin-svelte3/blob/6900d670c9e85509b2d21decd91f1e75f7934596/OTHER_PLUGINS.md#eslint-plugin-import
"import/first": "off",
"import/no-duplicates": "off",
"import/no-mutable-exports": "off",
"import/no-unresolved": "off",

// Temporarily work around a bug in eslint-plugin-svelte3.
//
// https://github.com/sveltejs/eslint-plugin-svelte3/issues/41#issuecomment-572503966
"no-multiple-empty-lines": ["error", { max: 2, maxBOF: 2, maxEOF: 0 }],
},
},
{
files: ["tests/**/*.test.js"],
plugins: ["jest"],
extends: ["plugin:jest/recommended", "plugin:jest/style"],
env: {
jest: true,
},
},
],
};
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug_report.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,4 @@ A clear and concise description of what you expected to happen.
Add any other context about the problem here.

**Mentions**
Add mentions for anybody you'd like to make aware of this issue; likely @hamilton, @jmccrosky, @klukas, and @openjck.
Add mentions for anybody you'd like to make aware of this issue; likely @hamilton and @jklukas.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/feature_request.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ A clear and concise description of any alternative solutions or features you've
Add any other context or screenshots about the feature request here.

**Mentions**
Add mentions for anybody you'd like to make aware of this issue; likely @hamilton, @jmccrosky, @klukas, and @openjck.
Add mentions for anybody you'd like to make aware of this issue; likely @hamilton and @jklukas.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Changelog

## unreleased

- Revamp GUD to use `graph-paper` components ([#85](https://github.com/mozilla/gud/pull/85))
69 changes: 1 addition & 68 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Mozilla Growth & Usage Dashboard
---

#### _overall: jmccrosky@ | data: jklukas@ | front end: hulmer@ (updated 2020-01-15)_
#### _data: jklukas@ | front end: hulmer@ (updated 2020-10-13)_

The Mozilla Growth & Usage Dashboard (GUD) is a tool to visualize growth metrics in a standard way across Mozilla’s products. It is intended to be quite intuitive to use, but we provide some brief documentation here. Please reach out (`#gud` on slack) if anything is unclear or you are unsure how to use GUD for your purposes.

Expand Down Expand Up @@ -70,71 +70,6 @@ Among new profiles created on the day specified, what proportion (out of 1) meet

Among profiles that were active in the specified usage criterion at least once in the week starting on the specified day, what proportion (out of 1) meet the usage criterion during the following week.

## Usage Criteria

### Firefox (Desktop)

#### Any Firefox Activity

The profile has sent a telemetry ping from Firefox Desktop on the day in question.

#### New Firefox Desktop Profile Created

The count of the number of new profiles created on the day in question. Note this uses a main ping methodology for support for our entire history, rather than the newer `new-profile` ping.

#### Visited 5 URIs

The profile sent a main ping on the day in question that indicates that the profile opened at least 5 URIs.

#### Opened DevTools

The profile sent a main ping on the day in question that indicates that the developer tools feature was activated at least once.

### Fenix

#### Any Fenix Activity

The profile has sent a telemetry ping from Fenix on the day in question.
Firefox Accounts

#### Any Firefox Account Activity

The profile has sent a telemetry ping from Firefox Account on the day in question. This corresponds to “active” events in Amplitude.

### Fennec

#### Any Fennec Android Activity

The profile has sent a telemetry ping from Fennec Android on the day in question.

#### Any Fennec iOS Activity

The profile has sent a telemetry ping from Fennec iOS on the day in question.

### Focus

#### Any Focus Android Activity

The profile has sent a telemetry ping from Focus Android on the day in question.

#### Any Focus iOS Activity

The profile has sent a telemetry ping from Focus iOS on the day in question.

### Other Products

#### Any Firefox Lite Activity

The profile has sent a telemetry ping from Firefox Lite on the day in question.

#### Any Firefox for FireTV Activity

The profile has sent a telemetry ping from Firefox for FireTV on the day in question.

#### Any `FirefoxConnect` Activity

The profile has sent a telemetry ping from `FirefoxConnect` on the day in question.

## Dimensions

During a period of time, a particular profile may take on more than one value within a dimension. For example, a profile may use release channel and beta channel browsers in a single day, resulting in two pings for the day with different values of channel. Similarly, a profile may be used in one country one day and another country the next day, resulting in two pings for two consecutive days that have different values of country. Generally, for a metric, we need to assign a profile to one particular value for each dimension. As such we define the value for each dimension within a day by taking the most frequent value seen in that day, breaking ties by taking the value that occurs last. We then use the values from the last day within the data that the metric examines. This is documented in more detail [in the exact MAU reference](https://docs.telemetry.mozilla.org/datasets/bigquery/exact_mau/reference.html).
Expand Down Expand Up @@ -173,8 +108,6 @@ Please direct all feedback to `#gud` on slack.

- The underlying tables are closely related to the [Exact MAU tables].

- There is a [prototype tool](https://github.com/mozilla/dscontrib/tree/master/src/dscontrib/jmccrosky/gudnightly) in Databricks on which GUD was based. It still exists and has been branded `“gudnightly”` as it has many features that do not yet exist in GUD, including smoothing, year-over-year comparisons, plotting multiple slices on a single axis, etc. However, it is very slow, less user-friendly, and as of this writing only supports desktop data.

- Tables can be queried directly from BigQuery for programmatic access; see an example in [https://sql.telemetry.mozilla.org/queries/65337/source](https://sql.telemetry.mozilla.org/queries/65337/source).

[exact mau tables]: https://docs.telemetry.mozilla.org/datasets/bigquery/exact_mau/reference.html
Loading

0 comments on commit 8145549

Please sign in to comment.