Datopian Data Explorer

README.md

This gist looks at integrating Datopioan's data explorer with our ckan instance https://tech.datopian.com/data-explorer/

What's done

• Integration with datopian/datapackage-views-js
• Pretty, interactive, paginated table pulling data directly from our datapusher api

What's remaining

• Get the filtering component to work
• Currently there is an error when filtering - See here

Testing

Overwrite the contents of adx/ckan/ckanext/reclineview/theme/templates/recline_view.html with recline_view.html in this gist

recline_view.html

<!-- /home/ubuntu/fjelltopp/adx/ckan/ckanext/reclineview/theme/templates/recline_view.html -->

{% extends "base.html" %}

{% block page %}

{% set dict=h.datastore_dictionary(resource.id) %}

  {% set map_config = h.get_map_config() %}
  <!-- <div data-module="recline_view"
       data-module-site_url="{{ h.dump_json(h.url('/', locale='default', qualified=true)) }}"
       data-module-resource = "{{ h.dump_json(resource_json) }}";
       data-module-resource-view = "{{ h.dump_json(resource_view_json) }}";
       data-module-map_config= "{{ h.dump_json(map_config) }}";
       data-module-dataproxy-url= "{{ h.get_dataproxy_url() }}"
       >
    <h4 class="loading-dialog">
      <div class="loading-spinner"></div>
      <div class="left">{{ _('Loading...') }}</div>
    </h4>
  </div> -->

  <!-- Data Explorer CSS -->
  <link
  rel="stylesheet"
  type="text/css"
  href="https://data.nationalgrideso.com/static/dataexplorer/css/main.59b3c190.chunk.css"
  />
  <link
  rel="stylesheet"
  type="text/css"
  href="https://data.nationalgrideso.com/static/dataexplorer/css/2.bdfddcb8.chunk.css"
  />
  <link
  rel="stylesheet"
  type="text/css"
  href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
  />
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.0.0/build/styles/default.min.css">
  <style>
  h1 {
    font-size: 36px;
    margin-top: 24px;
    margin-bottom: 12px;
  }

  .breadcrumb {
    padding: 8px 15px;
    margin-bottom: 24px;
    list-style: none;
  }

  .bg-gray-100 {
    background-color: #f8f9fa !important;
  }

  .constraints-group code {
    color: #4a5568 !important;
    font-weight: 500 !important;
    background-color: #e6e6e6;
  }
  .text-view pre { 
    max-height: 500px; 
    overflow: scroll;
  }

  @media (min-width: 1280px) {
    .container {
      max-width: 1170px;
    }
  }
  </style>
  <!-- End Data Explorer CSS -->

  <div class="data-explorer" id="data-explorer-{{ resource.id }}" data-datapackage='{
  "widgets": [
    {
      "name": "Table",
      "active": true,
      "datapackage": {
        "views": [
          {
            "id": "{{ resource.id }}",
            "specType": "table"
          }
        ]
      }
    }
  ],
  "datapackage": {
    "resources": [
      {
        "views": [
          {
            "resource_id": "{{ resource.id }}",
            "spec": {
              "widgets": [
                {
                  "specType": "table"
                },
                {
                  "specType": "simple"
                },
                {
                  "specType": "tabularmap"
                }
              ]
            }
          }
        ],
        "schema": {
          "fields": [
            {% for field in dict %}
              {
                  "type": "text",
                  "name": "{{ field.id }}"
              }
              {{ ", " if not loop.last else "" }}
            {% endfor %}
      ]
        },
        "id": "{{ resource.id }}",
        "datastore_active": false,      
        "path": "http://adr.local/dataset/{{ package.id }}/resource/{{ resource.id }}/download/daily-bsuos-forecast-2021-22.csv",
        "api": "http://adr.local/api/3/action/datastore_search?resource_id={{ resource.id }}&sort=_id asc"
      }
    ]
  }
  }'></div>

  <script
  type="text/javascript"
  src="https://data.nationalgrideso.com/static/dataexplorer/js/runtime~main.a8a9905a.js"
  ></script>

  <script
  type="text/javascript"
  src="https://data.nationalgrideso.com/static/dataexplorer/js/2.8489727c.chunk.js"
  ></script>
  <script
  type="text/javascript"
  src="https://data.nationalgrideso.com/static/dataexplorer/js/main.6dcb79ac.chunk.js"
  ></script>

  {% asset 'base/view-filters' %}
  {% asset 'ckanext-reclineview/main' %}
{% endblock %}

{% block styles %}{% endblock %}
{% block custom_styles %}{% endblock %}