Skip to content

Which css file should be included in Third Party Visualizations? #122

New issue
New issue
Closed
Closed
Which css file should be included in Third Party Visualizations?#122
@DaMinaup6

Description

@DaMinaup6
DaMinaup6
opened on Oct 30, 2015

I am trying to use Third Party Visualizations in my project. After the installation:

# Clone the repository.
git clone https://github.com/googleanalytics/ga-dev-tools.git
cd ga-dev-tools

# Install the build dependencies.
pip install -r requirements.txt -t python_modules
npm install
npm run build

And I had included /public/css/index.css and /src/css/index.css. The view is like:
image
My code is (reference)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/public/css/index.css">
    <link rel="stylesheet" type="text/css" href="/src/css/index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
    <script>
      (function(w,d,s,g,js,fs){
        g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
        js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
        js.src='https://apis.google.com/js/platform.js';
        fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
      }(window,document,'script'));
    </script>
    <script src="/public/javascript/embed-api/components/view-selector2.js"></script>
    <script src="/public/javascript/embed-api/components/date-range-selector.js"></script>
    <script src="/public/javascript/embed-api/components/active-users.js"></script>
  </head>
  <body>
    <div id="embed-api-auth-container"></div>
    <div id="view-selector-container"></div>
    <h3  id="view-name"></h3>
    <div id="active-users-container"></div>
    <div id="chart-1-container"></div>
    <div id="legend-1-container"></div>
    <div id="chart-2-container"></div>
    <div id="legend-2-container"></div>
    <div id="chart-3-container"></div>
    <div id="legend-3-container"></div>
    <div id="chart-4-container"></div>
    <div id="legend-4-container"></div>
    <!--Google Analytic-->
    <script>
      gapi.analytics.ready(function() {
        gapi.analytics.auth.authorize({
          container: 'embed-api-auth-container',
          clientid: 'xxx'
        });

        var activeUsers = new gapi.analytics.ext.ActiveUsers({
          container: 'active-users-container',
          pollingInterval: 5
        });

        activeUsers.once('success', function() {
          var element = this.container.firstChild;
          var timeout;

          this.on('change', function(data) {
            var element = this.container.firstChild;
            var animationClass = data.delta > 0 ? 'is-increasing' : 'is-decreasing';
            element.className += (' ' + animationClass);

            clearTimeout(timeout);
            timeout = setTimeout(function() {
              element.className =
                  element.className.replace(/ is-(increasing|decreasing)/g, '');
            }, 3000);
          });
        });

        var viewSelector = new gapi.analytics.ext.ViewSelector2({
          container: 'view-selector-container'
        }).execute();

        viewSelector.on('viewChange', function(data) {
          var title = document.getElementById('view-name');
          title.innerHTML = data.property.name + ' (' + data.view.name + ')';

          // Start tracking active users for this view.
          activeUsers.set(data).execute();

          // Render all the of charts for this view.
          renderWeekOverWeekChart(data.ids);
          renderYearOverYearChart(data.ids);
          renderTopBrowsersChart(data.ids);
          renderTopCountriesChart(data.ids);
        });

        function renderWeekOverWeekChart(ids) {
          var now = moment(); // .subtract(3, 'day');

          var thisWeek = query({
            'ids': ids,
            'dimensions': 'ga:date,ga:nthDay',
            'metrics': 'ga:sessions',
            'start-date': moment(now).subtract(1, 'day').day(0).format('YYYY-MM-DD'),
            'end-date': moment(now).format('YYYY-MM-DD')
          });

          var lastWeek = query({
            'ids': ids,
            'dimensions': 'ga:date,ga:nthDay',
            'metrics': 'ga:sessions',
            'start-date': moment(now).subtract(1, 'day').day(0).subtract(1, 'week')
                .format('YYYY-MM-DD'),
            'end-date': moment(now).subtract(1, 'day').day(6).subtract(1, 'week')
                .format('YYYY-MM-DD')
          });

          Promise.all([thisWeek, lastWeek]).then(function(results) {

            var data1 = results[0].rows.map(function(row) { return +row[2]; });
            var data2 = results[1].rows.map(function(row) { return +row[2]; });
            var labels = results[1].rows.map(function(row) { return +row[0]; });

            labels = labels.map(function(label) {
              return moment(label, 'YYYYMMDD').format('ddd');
            });

            var data = {
              labels : labels,
              datasets : [
                {
                  label: 'Last Week',
                  fillColor : 'rgba(220,220,220,0.5)',
                  strokeColor : 'rgba(220,220,220,1)',
                  pointColor : 'rgba(220,220,220,1)',
                  pointStrokeColor : '#fff',
                  data : data2
                },
                {
                  label: 'This Week',
                  fillColor : 'rgba(151,187,205,0.5)',
                  strokeColor : 'rgba(151,187,205,1)',
                  pointColor : 'rgba(151,187,205,1)',
                  pointStrokeColor : '#fff',
                  data : data1
                }
              ]
            };

            new Chart(makeCanvas('chart-1-container')).Line(data);
            generateLegend('legend-1-container', data.datasets);
          });
        }

        function renderYearOverYearChart(ids) {

          var now = moment(); // .subtract(3, 'day');

          var thisYear = query({
            'ids': ids,
            'dimensions': 'ga:month,ga:nthMonth',
            'metrics': 'ga:users',
            'start-date': moment(now).date(1).month(0).format('YYYY-MM-DD'),
            'end-date': moment(now).format('YYYY-MM-DD')
          });

          var lastYear = query({
            'ids': ids,
            'dimensions': 'ga:month,ga:nthMonth',
            'metrics': 'ga:users',
            'start-date': moment(now).subtract(1, 'year').date(1).month(0)
                .format('YYYY-MM-DD'),
            'end-date': moment(now).date(1).month(0).subtract(1, 'day')
                .format('YYYY-MM-DD')
          });

          Promise.all([thisYear, lastYear]).then(function(results) {
            var data1 = results[0].rows.map(function(row) { return +row[2]; });
            var data2 = results[1].rows.map(function(row) { return +row[2]; });
            var labels = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul','Aug','Sep','Oct','Nov','Dec'];

            for (var i = 0, len = labels.length; i < len; i++) {
              if (data1[i] === undefined) data1[i] = null;
              if (data2[i] === undefined) data2[i] = null;
            }

            var data = {
              labels : labels,
              datasets : [
                {
                  label: 'Last Year',
                  fillColor : 'rgba(220,220,220,0.5)',
                  strokeColor : 'rgba(220,220,220,1)',
                  data : data2
                },
                {
                  label: 'This Year',
                  fillColor : 'rgba(151,187,205,0.5)',
                  strokeColor : 'rgba(151,187,205,1)',
                  data : data1
                }
              ]
            };

            new Chart(makeCanvas('chart-2-container')).Bar(data);
            generateLegend('legend-2-container', data.datasets);
          })
              .catch(function(err) {
                console.error(err.stack);
              });
        }

        function renderTopBrowsersChart(ids) {

          query({
            'ids': ids,
            'dimensions': 'ga:browser',
            'metrics': 'ga:pageviews',
            'sort': '-ga:pageviews',
            'max-results': 5
          })
              .then(function(response) {

                var data = [];
                var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A'];

                response.rows.forEach(function(row, i) {
                  data.push({ value: +row[1], color: colors[i], label: row[0] });
                });

                new Chart(makeCanvas('chart-3-container')).Doughnut(data);
                generateLegend('legend-3-container', data);
              });
        }

        function renderTopCountriesChart(ids) {
          query({
            'ids': ids,
            'dimensions': 'ga:country',
            'metrics': 'ga:sessions',
            'sort': '-ga:sessions',
            'max-results': 5
          })
              .then(function(response) {

                var data = [];
                var colors = ['#4D5360','#949FB1','#D4CCC5','#E2EAE9','#F7464A'];

                response.rows.forEach(function(row, i) {
                  data.push({
                    label: row[0],
                    value: +row[1],
                    color: colors[i]
                  });
                });

                new Chart(makeCanvas('chart-4-container')).Doughnut(data);
                generateLegend('legend-4-container', data);
              });
        }

        function query(params) {
          return new Promise(function(resolve, reject) {
            var data = new gapi.analytics.report.Data({query: params});
            data.once('success', function(response) { resolve(response); })
                .once('error', function(response) { reject(response); })
                .execute();
          });
        }

        function makeCanvas(id) {
          var container = document.getElementById(id);
          var canvas = document.createElement('canvas');
          var ctx = canvas.getContext('2d');

          container.innerHTML = '';
          canvas.width = container.offsetWidth;
          canvas.height = container.offsetHeight;
          container.appendChild(canvas);

          return ctx;
        }

        function generateLegend(id, items) {
          var legend = document.getElementById(id);
          legend.innerHTML = items.map(function(item) {
            var color = item.color || item.fillColor;
            var label = item.label;
            return '<li><i style="background:' + color + '"></i>' + label + '</li>';
          }).join('');
        }

        Chart.defaults.global.animationSteps = 60;
        Chart.defaults.global.animationEasing = 'easeInOutQuart';
        Chart.defaults.global.responsive = true;
        Chart.defaults.global.maintainAspectRatio = false;
      });
    </script>
  </body>
</html>

Activity

philipwalton

philipwalton commented on Oct 30, 2015

@philipwalton
philipwalton
on Oct 30, 2015
Member

/public/css/index.css is the only file that's needed, and if you look at the demo it's the only CSS file that's listed anywhere in the source code (if your view source).

The reason your demos aren't working is because you're not using any of the classes defined in /public/css/index.css in the HTML that you're using.

philipwalton
closed this as completedon Oct 30, 2015
akash-pal

akash-pal commented on May 16, 2016

@akash-pal
akash-pal
on May 16, 2016

How to solve this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @philipwalton@DaMinaup6@akash-pal

        Issue actions
          Which css file should be included in Third Party Visualizations? · Issue #122 · googleanalytics/ga-dev-tools