Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
DaMinaup6 opened this issue Oct 30, 2015 · 2 comments
Closed

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

DaMinaup6 opened this issue Oct 30, 2015 · 2 comments

Comments

@DaMinaup6
Copy link

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>
@philipwalton
Copy link
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.

@akash-pal
Copy link

How to solve this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@philipwalton @DaMinaup6 @akash-pal