Skip to content

Commit

Permalink
Merge pull request ramp4-pcar4#386 from dnlnashed/upgrade
Browse files Browse the repository at this point in the history 
Migrate Storylines to Vue3 (ramp4-pcar4#386)

Co-Authored-By: Yi Lei Feng <[email protected]>
  • Loading branch information
@spencerwahl @yileifeng
spencerwahl and yileifeng authored Oct 16, 2023
2 parents e2429f4 + 42e210b commit dfc5452
Show file tree
Hide file tree
Showing 34 changed files with 14,422 additions and 10,488 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ module.exports = {
env: {
node: true
},
parser: 'vue-eslint-parser',
extends: [
'plugin:vue/essential',
'eslint:recommended',
Expand Down
22,178 changes: 13,050 additions & 9,128 deletions package-lock.json
View file

Large diffs are not rendered by default.

40 changes: 20 additions & 20 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,37 @@
"@types/highcharts": "^7.0.0",
"core-js": "^3.6.5",
"highcharts": "^9.3.2",
"highcharts-vue": "^1.4.0",
"hooper": "^0.3.4",
"intersection-observer": "^0.12.0",
"highcharts-vue": "^1.4.3",
"intersection-observer": "^0.12.2",
"jszip": "^3.10.1",
"markdown-it": "^12.0.6",
"nouislider": "^15.5.0",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-fullscreen": "^2.6.1",
"vue-i18n": "^8.27.2",
"vue-loading-spinner": "^1.0.11",
"vue-papa-parse": "^3.0.4",
"vue-progressive-image": "^3.2.0",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.3",
"vue-scrollama": "^2.0.2",
"vue-tippy": "^4.10.0"
"vue": "^3.3.4",
"vue-class-component": "^8.0.0-rc.1",
"vue-fullscreen": "^3.1.1",
"vue-i18n": "^9.2.2",
"vue-papa-parse": "^3.1.0",
"vue-property-decorator": "^10.0.0-rc.2",
"vue-router": "^4.2.4",
"vue-tippy": "^6.3.1",
"vue3-carousel": "^0.3.1",
"vue3-scrollama": "^0.2.2",
"vue3-spinners": "^1.2.2"
},
"devDependencies": {
"@types/markdown-it": "^12.0.1",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "^4.1.1",
"@vue/cli-plugin-babel": "^4.5.19",
"@vue/cli-plugin-eslint": "^4.5.19",
"@vue/cli-plugin-typescript": "^4.5.19",
"@vue/cli-service": "^4.5.19",
"@vue/compiler-sfc": "^3.3.4",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"autoprefixer": "^9.8.6",
"dsv-loader": "^2.0.0",
"eslint": "^6.7.2",
"eslint": "^6.8.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"html-loader": "^0.5.5",
Expand All @@ -52,6 +52,6 @@
"sass-loader": "^8.0.2",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",
"typescript": "~4.1.5",
"vue-template-compiler": "^2.6.11"
"vue-eslint-parser": "^9.3.1"
}
}
191 changes: 15 additions & 176 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
{
"title": "This Slide Is Dynamic!",
"type": "dynamic",
"content": "You can click on one of the following links to change the right panel.\n\n- <a panel='panel-1'>Text Panel</a>\n- <a panel='panel-2'>Image Panel</a>\n- <a panel='panel-3'>Charts Panel</a>\n- <a panel='panel-4'>Map Panel</a>\n- <a panel='panel-5'>Longer text section with table</a>\n- <a href='#/en/00000000-0000-0000-0000-000000000000#2-oil-sands-deposits' target='_self'>Self target link</a>\n- <a panel='panel-6'>Video from YouTube</a>\n- <a panel='panel-7'>Video externally hosted</a>\n- <a panel='panel-8'>Video locally hosted</a>\n\nFun stuff.",
"content": "You can click on one of the following links to change the right panel.\n\n- <a panel='panel-1'>Text Panel</a>\n- <a panel='panel-2'>Image Panel</a>\n- <a panel='panel-3'>Charts Panel</a>\n- <a panel='panel-4'>Map Panel</a>\n- <a panel='panel-5'>Longer text section with table</a>\n- <a href='#/en/00000000-0000-0000-0000-000000000000#2-oil-sands-deposits' target='_self'>Self target link</a>\n- <a panel='panel-6'>Video externally hosted</a>\n- <a panel='panel-7'>Video locally hosted</a>\n\nFun stuff.",
"children": [
{
"id": "panel-1",
Expand Down Expand Up @@ -80,15 +80,6 @@
},
{
"id": "panel-6",
"panel": {
"type": "video",
"title": "Special YT Video",
"videoType": "YouTube",
"src": "https://www.youtube.com/embed/dQw4w9WgXcQ"
}
},
{
"id": "panel-7",
"panel": {
"type": "video",
"title": "Overtime job",
Expand All @@ -98,13 +89,15 @@
}
},
{
"id": "panel-8",
"id": "panel-7",
"panel": {
"type": "video",
"title": "Overtime job",
"videoType": "local",
"src": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4",
"caption": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4.vtt",
"src": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4"
"transcript": "00000000-0000-0000-0000-000000000000/assets/en/cpts-lg-en.html",
"height": 500
}
}
]
Expand All @@ -123,60 +116,7 @@
"type": "video",
"title": "Special YouTube video",
"videoType": "YouTube",
"src": "https://www.youtube.com/embed/dQw4w9WgXcQ",
"height": 700
}
]
},
{
"title": "Video Panel 2",
"panel": [
{
"title": "Video Test for external source content",
"content": "This is a video demo from the WET media player demo pages.",
"type": "text"
},
{
"type": "video",
"title": "Overtime job",
"videoType": "external",
"src": "https://wet-boew.github.io/wet-boew-attachments/videos/video1-en.mp4",
"caption": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4.vtt",
"height": 500
}
]
},
{
"title": "Video Panel 3",
"panel": [
{
"title": "Video Test for local source content",
"content": "This is a video demo from local video stored in assets folder.",
"type": "text"
},
{
"type": "video",
"title": "Overtime job",
"videoType": "local",
"src": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4",
"caption": "00000000-0000-0000-0000-000000000000/assets/en/video1-en.mp4.vtt",
"transcript": "00000000-0000-0000-0000-000000000000/assets/en/cpts-lg-en.html",
"height": 500
}
]
},
{
"title": "Oil sands deposits",
"panel": [
{
"title": "Oil sands deposits",
"content": "There are three large oil sands deposits in Canada:\n\n- The Athabasca;\n- Peace River; and\n- Cold Lake.\n\nAll three of the deposits are located in northern Alberta except for a small portion of the Cold Lake deposit, which extends into Saskatchewan. Together, these deposits cover [142,000 square kilometres](https://www.nrcan.gc.ca/our-natural-resources/energy-sources-distribution/clean-fossil-fuels/technical-overview/5851?_ga=2.92936030.219303224.1637701004-1958057264.1607712157) and are estimated to contain 166.3 billion barrels.\n\nThe oil sands extraction sector is a major contributor to Canada’s economy, with more than 528,000 people deriving direct, indirect and induced employment from the oil sands and its supporting sectors. To date, an estimated $325 billion of capital expenditures has been invested in the oil sands industry, and the sector produces 2.95 million barrels of oil per day.\n\nThis map shows a generalized potential extent of the three oil sands areas. The actual geological deposits themselves cover larger areas.",
"type": "text"
},
{
"config": "00000000-0000-0000-0000-000000000000/ramp-config/en/OilSandsDeposits.json",
"type": "map",
"scrollguard": true
"src": "https://www.youtube.com/embed/dQw4w9WgXcQ"
}
]
},
Expand Down Expand Up @@ -269,45 +209,6 @@
}
]
},
{
"title": "Reported mine tailings from oil sands surface mining facilities",
"panel": [
{
"title": "Reported mine tailings from oil sands surface mining facilities",
"content": "Similar to comparing release and transfer profiles, it is difficult to compare the seven oil sands surface mining facilities in terms of what they dispose of in their tailings impoundment areas. These facilities vary greatly in their size and in how much bitumen processing occurs on-site. Breakdowns of reported tailings for each facility are provided below.\n\n- Canadian Natural Resources Muskeg River and Jackpine Mines, and Horizon Oil Sands Processing Plant and Mine;\n- Fort Hills Oil Sands Mine;\n- Imperial Oil Kearl Processing Plant and Mine;\n- Suncor Energy Inc. Oil Sands; and\n- Syncrude Canada Aurora North Mine Site, and Syncrude Canada Ltd. (formerly Mildred Lake).",
"type": "text"
},
{
"type": "chart",
"charts": [
{
"src": "410b88da-0ed1-4749-903f-5e76c24e2e5f/charts/en/tailings/1.Syncrude Canada Ltd., Aurora North Mine Site 2019 Tailings.csv",
"options": {
"title": "Syncrude Canada Ltd., Aurora North Mine Site 2019 Tailings (Tonnes)",
"subtitle": "",
"type": "pie"
}
},
{
"src": "410b88da-0ed1-4749-903f-5e76c24e2e5f/charts/en/tailings/2.Fort Hill Energy L.P., Fort Hills Oil Sands 2019 Tailings.csv",
"options": {
"title": "Fort Hill Energy L.P., Fort Hills Oil Sands 2019 Tailings (Tonnes)",
"subtitle": "",
"type": "pie"
}
},
{
"src": "410b88da-0ed1-4749-903f-5e76c24e2e5f/charts/en/tailings/3.Canadian Natural Resources Limited, Horizon Oil Sands Processing Plant and Mine 2019 Tailings.csv",
"options": {
"title": "Canadian Natural Resources Limited, Horizon Oil Sands Processing Plant and Mine 2019 Tailings (Tonnes)",
"subtitle": "",
"type": "pie"
}
}
]
}
]
},
{
"title": "NPRI substances reported for oil sands mining facilities",
"panel": [
Expand Down Expand Up @@ -410,7 +311,7 @@
]
},
{
"title": "Trends in mine tailings reported from surface mining facilities",
"title": "Trends in mine tailings reported from surface mining facilities (Time Slider)",
"panel": [
{
"title": "Trends in mine tailings reported from surface mining facilities",
Expand All @@ -419,7 +320,12 @@
},
{
"config": "00000000-0000-0000-0000-000000000000/ramp-config/en/TailingsfromMiningFacilities2010to2019(timeslider).json",
"type": "map"
"type": "map",
"timeSlider": {
"range": [2010, 2019],
"start": [2010, 2019],
"attribute": "Reporting_Year___Année"
}
}
]
},
Expand Down Expand Up @@ -514,7 +420,7 @@
"title": "DQV Chart Gallery",
"panel": [
{
"title": "DQV Chart",
"title": "DQV Chart Gallery Featuring Hybrid and External Charts",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus, magna in pulvinar tincidunt, magna velit feugiat sem, nec rhoncus lectus tortor quis turpis. Vivamus erat velit, feugiat at nisl lacinia, pulvinar tempus nunc. Nulla suscipit vulputate dapibus. Fusce tincidunt neque nunc, sed porta lacus elementum vitae. Suspendisse imperdiet interdum ipsum, id aliquet lectus aliquet sit amet. Aliquam erat volutpat. Nulla convallis nisl sodales nunc ullamcorper pulvinar. Nulla ornare justo id sapien porta gravida. Cras condimentum, felis id pretium malesuada, lorem lorem viverra nisi, sit amet molestie mi nulla nec velit. Integer semper lorem scelerisque tellus iaculis finibus. Aliquam efficitur sodales elit nec sodales. Sed vitae ipsum quis eros vulputate luctus.",
"type": "text"
},
Expand All @@ -525,81 +431,14 @@
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
},
{
"src": "ea24000c-7dc3-49a9-baac-c55d28dcaeb9/charts/en/Ethlyene.glycol.release.trends.by.sector.2010-2019.tonnes.csv"
"src": "00000000-0000-0000-0000-000000000000/charts/en/csvUrlChart.json"
},
{
"src": "410b88da-0ed1-4749-903f-5e76c24e2e5f/charts/en/tailings/2.Fort Hill Energy L.P., Fort Hills Oil Sands 2019 Tailings.csv",
"options": {
"title": "Fort Hill Energy L.P., Fort Hills Oil Sands 2019 Tailings (Tonnes)",
"subtitle": "",
"type": "pie",
"colours": ["green", "#FAEBD7", "indigo", "#FFD700", "orange", "red"]
}
}
]
}
]
},
{
"title": "DQV Chart with CSV input",
"panel": [
{
"title": "DQV Chart with CSV input",
"content": "Test (╯°□°)╯︵ ┻━┻",
"type": "text"
},
{
"type": "chart",
"charts": [
{
"src": "ea24000c-7dc3-49a9-baac-c55d28dcaeb9/charts/en/Ethlyene.glycol.release.trends.by.sector.2010-2019.tonnes.csv",

"options": {
"xAxisLabel": "X Axis Test From Config",
"yAxisLabel": "Y Axis Test From Config",
"title": "Hello World",
"subtitle": "I am a DQVChart and this is from the config file"
}
}
]
}
]
},
{
"title": "Hybrid chart with bar and line",
"panel": [
{
"title": "Hybrid chart with bar and line",
"content": "Demo of a hybrid chart consisting of both a bar and line chart using a custom configured highcharts json file.",
"type": "text"
},
{
"type": "chart",
"charts": [
{
"src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json"
}
]
}
]
},
{
"title": "Chart with external CSV remote-hosted file",
"panel": [
{
"title": "Chart with external CSV remote-hosted file",
"content": "Demo of a chart containing external CSV file and using fetch()",
"type": "text"
},
{
"type": "chart",
"charts": [
{
"src": "00000000-0000-0000-0000-000000000000/charts/en/csvUrlChart.json"
}
]
}
]
}
],
"contextLink": "https://www.canada.ca/en/environment-climate-change/services/national-pollutant-release-inventory/tools-resources-data/exploredata.html",
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<link rel="icon" href="<%= BASE_URL %>favicon.svg" />
<link rel="icon" href="./favicon.svg" />
<link rel="stylesheet" href="scripts/multi-ramp/rv-styles.css" />

<title>
Expand Down
3 changes: 1 addition & 2 deletions src/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Vue } from 'vue-property-decorator';
@Component({})
export default class App extends Vue {}
</script>

Expand Down
13 changes: 7 additions & 6 deletions src/components/panels/audio-panel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@
</div>
</template>

<script lang="ts">
<script setup lang="ts">
import type { PropType } from 'vue';
import { AudioPanel } from '@storylines/definitions';
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component({})
export default class AudioPanelV extends Vue {
@Prop() config!: AudioPanel;
}
defineProps({
config: {
type: Object as PropType<AudioPanel>
}
});
</script>

<style lang="scss"></style>
Loading

0 comments on commit dfc5452

Please sign in to comment.