Chart.html.haml refactor (EE Version)

app/assets/javascripts/graphs/graphs_bundle.js

-import Chart from 'vendor/Chart';
-
-// export to global scope
-window.Chart = Chart;

app/assets/javascripts/graphs/graphs_charts.js → app/assets/javascripts/pages/projects/graphs/charts/index.js

-import Chart from 'vendor/Chart';
+import Chart from 'chart.js';
 import _ from 'underscore';
 
 document.addEventListener('DOMContentLoaded', () => {

app/assets/javascripts/pages/projects/pipelines/charts/index.js

-import Chart from 'vendor/Chart';
+import Chart from 'chart.js';
 
 const options = {
   scaleOverlay: true,

app/views/devise/sessions/two_factor.html.haml

 - if inject_u2f_api?
   - content_for :page_specific_javascripts do
-    = page_specific_javascript_bundle_tag('u2f')
+    = webpack_bundle_tag('u2f')
 
 %div
   = render 'devise/shared/tab_single', tab_title: 'Two-Factor Authentication'

app/views/profiles/_head.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('profile')
+  = webpack_bundle_tag('profile')

app/views/profiles/two_factor_auths/show.html.haml

@@ -6,8 +6,8 @@
 
 - content_for :page_specific_javascripts do
   - if inject_u2f_api?
-    = page_specific_javascript_bundle_tag('u2f')
-  = page_specific_javascript_bundle_tag('two_factor_auth')
+    = webpack_bundle_tag('u2f')
+  = webpack_bundle_tag('two_factor_auth')
 
 .js-two-factor-auth{ 'data-two-factor-skippable' => "#{two_factor_skippable?}", 'data-two_factor_skip_url' => skip_profile_two_factor_auth_path }
   .row.prepend-top-default

app/views/projects/blob/_upload.html.haml

@@ -29,4 +29,4 @@
                 = commit_in_fork_help
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('blob')
+  = webpack_bundle_tag('blob')

app/views/projects/blob/edit.html.haml

@@ -3,7 +3,7 @@
 - page_title "Edit", @blob.path, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_bundle_tag('blob')
+  = webpack_bundle_tag('blob')
 
 %div{ class: container_class }
   - if @conflict

app/views/projects/blob/new.html.haml

@@ -2,7 +2,7 @@
 - page_title "New File", @path.presence, @ref
 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_bundle_tag('blob')
+  = webpack_bundle_tag('blob')
 .editor-title-row
   %h3.page-title.blob-new-page-title
     New file

app/views/projects/blob/viewers/_balsamiq.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('balsamiq_viewer')
+  = webpack_bundle_tag('balsamiq_viewer')
 
 .file-content.balsamiq-viewer#js-balsamiq-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_notebook.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('notebook_viewer')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('notebook_viewer')
 
 .file-content#js-notebook-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_pdf.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('pdf_viewer')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('pdf_viewer')
 
 .file-content#js-pdf-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/blob/viewers/_sketch.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('sketch_viewer')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('sketch_viewer')
 
 .file-content#js-sketch-viewer{ data: { endpoint: blob_raw_path } }
   .js-loading-icon.text-center.prepend-top-default.append-bottom-default.js-loading-icon{ 'aria-label' => 'Loading Sketch preview' }

app/views/projects/blob/viewers/_stl.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('stl_viewer')
+  = webpack_bundle_tag('stl_viewer')
 
 .file-content.is-stl-loading
   .text-center#js-stl-viewer{ data: { endpoint: blob_raw_path } }

app/views/projects/commit/_pipelines_list.haml

@@ -8,5 +8,5 @@
 } }
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('commit_pipelines')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('commit_pipelines')

app/views/projects/commit/show.html.haml

@@ -7,8 +7,8 @@
 - page_title        "#{@commit.title} (#{@commit.short_id})", "Commits"
 - page_description  @commit.description
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('diff_notes')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('diff_notes')
 
 .container-fluid{ class: [limited_container_width, container_class] }
   = render "commit_box"

app/views/projects/cycle_analytics/show.html.haml

 - @no_container = true
 - page_title "Cycle Analytics"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('cycle_analytics')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('cycle_analytics')
 
 #cycle-analytics{ class: container_class, "v-cloak" => "true", data: { request_path: project_cycle_analytics_path(@project) } }
   - if @cycle_analytics_no_data

app/views/projects/environments/folder.html.haml

@@ -2,8 +2,8 @@
 - page_title "Environments"
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag("environments_folder")
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag("environments_folder")
 
 #environments-folder-list-view{ data: { endpoint: folder_project_environments_path(@project, @folder, format: :json),
   "folder-name" => @folder,

app/views/projects/environments/index.html.haml

@@ -3,8 +3,8 @@
 - add_to_breadcrumbs("Pipelines", project_pipelines_path(@project))
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag("common_vue")
-  = page_specific_javascript_bundle_tag("environments")
+  = webpack_bundle_tag("common_vue")
+  = webpack_bundle_tag("environments")
 
 #environments-list-view{ data: { environments_data: environments_list_data,
   "can-create-deployment" => can?(current_user, :create_deployment, @project).to_s,

app/views/projects/environments/terminal.html.haml

@@ -3,7 +3,7 @@
 
 - content_for :page_specific_javascripts do
   = stylesheet_link_tag "xterm/xterm"
-  = page_specific_javascript_bundle_tag("terminal")
+  = webpack_bundle_tag("terminal")
 
 %div{ class: container_class }
   .top-area

app/views/projects/graphs/charts.html.haml

@@ -2,8 +2,6 @@
 - page_title "Charts"
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag('common_d3')
-  = webpack_bundle_tag('graphs')
-  = webpack_bundle_tag('graphs_charts')
 
 .repo-charts{ class: container_class }
   %h4.sub-header

app/views/projects/graphs/show.html.haml

@@ -2,7 +2,6 @@
 - page_title _('Contributors')
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag('common_d3')
-  = webpack_bundle_tag('graphs')
   = webpack_bundle_tag('graphs_show')
 
 .js-graphs-show{ class: container_class, 'data-project-graph-path': project_graph_path(@project, current_ref, format: :json) }

app/views/projects/issues/show.html.haml

@@ -100,5 +100,5 @@
 
 = render 'shared/issuable/sidebar', issuable: @issue
 
-= page_specific_javascript_bundle_tag('common_vue')
-= page_specific_javascript_bundle_tag('issue_show')
+= webpack_bundle_tag('common_vue')
+= webpack_bundle_tag('issue_show')

app/views/projects/merge_requests/conflicts.html.haml

 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('merge_conflicts')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('merge_conflicts')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/mr_title"
 

app/views/projects/merge_requests/conflicts/show.html.haml

 - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('merge_conflicts')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('merge_conflicts')
   = page_specific_javascript_tag('lib/ace.js')
 = render "projects/merge_requests/mr_title"
 

app/views/projects/network/show.html.haml

 - breadcrumb_title "Graph"
 - page_title "Graph", @ref
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('network')
+  = webpack_bundle_tag('network')
 = render "head"
 %div{ class: container_class }
   .project-network

app/views/projects/pipelines/index.html.haml

@@ -16,5 +16,5 @@
     "ci-lint-path" => ci_lint_path,
     "reset-cache-path" => reset_cache_project_settings_ci_cd_path(@project) } }
 
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('pipelines')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('pipelines')

app/views/projects/protected_branches/_index.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('protected_branches')
+  = webpack_bundle_tag('protected_branches')
 
 - content_for :create_protected_branch do
   = render 'projects/protected_branches/create_protected_branch'

app/views/projects/protected_tags/_index.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('protected_tags')
+  = webpack_bundle_tag('protected_tags')
 
 - content_for :create_protected_tag do
   = render 'projects/protected_tags/create_protected_tag'

app/views/projects/registry/repositories/index.html.haml

@@ -14,8 +14,8 @@
     .col-lg-12
       #js-vue-registry-images{ data: { endpoint: project_container_registry_index_path(@project, format: :json) } }
 
-      = page_specific_javascript_bundle_tag('common_vue')
-      = page_specific_javascript_bundle_tag('registry_list')
+      = webpack_bundle_tag('common_vue')
+      = webpack_bundle_tag('registry_list')
 
   .row.prepend-top-10
     .col-lg-12

app/views/projects/settings/repository/show.html.haml

@@ -3,8 +3,8 @@
 - @content_class = "limit-container-width" unless fluid_layout
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('deploy_keys')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('deploy_keys')
 
 = render "projects/push_rules/index"
 = render "projects/mirrors/show"

app/views/shared/issuable/_sidebar.html.haml

 - todo = issuable_todo(issuable)
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_vue')
-  = page_specific_javascript_bundle_tag('ee_sidebar')
+  = webpack_bundle_tag('common_vue')
+  = webpack_bundle_tag('ee_sidebar')
 
 %aside.right-sidebar.js-right-sidebar.js-issuable-sidebar{ data: { signed: { in: current_user.present? } }, class: sidebar_gutter_collapsed_class, 'aria-live' => 'polite' }
   .issuable-sidebar{ data: { endpoint: "#{issuable_json_path(issuable)}" } }

app/views/shared/snippets/_form.html.haml

 - content_for :page_specific_javascripts do
   = page_specific_javascript_tag('lib/ace.js')
-  = page_specific_javascript_bundle_tag('snippet')
+  = webpack_bundle_tag('snippet')
 
 .snippet-form-holder
   = form_for @snippet, url: url, html: { class: "form-horizontal snippet-form js-requires-input js-quick-submit common-note-form" } do |f|

config/webpack.config.js

@@ -67,8 +67,6 @@ var config = {
     new_epic:             'ee/epics/new_epic/new_epic_bundle.js',
     filtered_search:      './filtered_search/filtered_search_bundle.js',
     geo_nodes:            'ee/geo_nodes',
-    graphs:               './graphs/graphs_bundle.js',
-    graphs_charts:        './graphs/graphs_charts.js',
     graphs_show:          './graphs/graphs_show.js',
     help:                 './help/help.js',
     issuable:             './issuable/issuable_bundle.js',
@@ -300,7 +298,6 @@ var config = {
     new webpack.optimize.CommonsChunkPlugin({
       name: 'common_d3',
       chunks: [
-        'graphs',
         'graphs_show',
         'monitoring',
         'users',

ee/app/assets/javascripts/pages/groups/analytics/show/index.js

-/* global Chart */
+import Chart from 'chart.js';
+
 export default () => {
   const dataEl = document.getElementById('js-analytics-data');
   if (dataEl) {

ee/app/views/groups/analytics/show.html.haml

@@ -2,10 +2,6 @@
 - header_title group_title(@group, "Contribution Analytics", group_analytics_path(@group))
 
 - if @group.feature_available?(:contribution_analytics)
-  - content_for :page_specific_javascripts do
-    = page_specific_javascript_bundle_tag('common_d3')
-    = page_specific_javascript_bundle_tag('graphs')
-
   .sub-header-block
     .pull-right
       .dropdown.inline

ee/app/views/projects/graphs/_head.html.haml

-= content_for :sub_nav do
-  .scrolling-tabs-container.sub-nav-scroll
-    = render 'shared/nav_scroll'
-    .nav-links.sub-nav.scrolling-tabs
-      %ul{ class: (container_class) }
-
-        - content_for :page_specific_javascripts do
-          = page_specific_javascript_bundle_tag('common_d3')
-          = page_specific_javascript_bundle_tag('graphs')
-        = nav_link(action: :show) do
-          = link_to 'Contributors', namespace_project_graph_path
-        = nav_link(action: :commits) do
-          = link_to 'Commits', commits_namespace_project_graph_path
-        = nav_link(action: :languages) do
-          = link_to 'Languages', languages_namespace_project_graph_path
-        - if @project.feature_available?(:builds, current_user)
-          = nav_link(action: :ci) do
-            = link_to ci_namespace_project_graph_path do
-              Continuous Integration

ee/app/views/projects/protected_branches/ee/_index.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('ee_protected_branches')
+  = webpack_bundle_tag 'ee_protected_branches'
 
 - content_for :create_protected_branch do
   = render 'projects/protected_branches/ee/create_protected_branch'

ee/app/views/projects/protected_tags/ee/_index.html.haml

 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('ee_protected_tags')
+  = webpack_bundle_tag 'ee_protected_tags'
 
 - content_for :create_protected_tag do
   = render 'projects/protected_tags/ee/create_protected_tag'

ee/app/views/shared/milestones/_burndown.html.haml

@@ -4,8 +4,8 @@
 - warning = data_warning_for(burndown)
 
 - content_for :page_specific_javascripts do
-  = page_specific_javascript_bundle_tag('common_d3')
-  = page_specific_javascript_bundle_tag('burndown_chart')
+  = webpack_bundle_tag 'common_d3'
+  = webpack_bundle_tag 'burndown_chart'
 
 = warning
 

package.json

@@ -24,6 +24,7 @@
     "blackst0ne-mermaid": "^7.1.0-fixed",
     "bootstrap-sass": "^3.3.6",
     "brace-expansion": "^1.1.8",
+    "chart.js": "1.0.2",
     "classlist-polyfill": "^1.2.0",
     "clipboard": "^1.7.1",
     "compression-webpack-plugin": "^1.0.0",

yarn.lock

@@ -1443,6 +1443,10 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chart.js@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-1.0.2.tgz#ad57d2229cfd8ccf5955147e8121b4911e69dfe7"
+
 chokidar@^1.4.1, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"