Skip to content

F
FloodSimulation-Browser
Commit f44d7236 authored by Richard's avatar Richard
Browse files
Options

worked on charts, with little succes:)

parent 5b955003
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4036 additions and 8 deletions
www/app.js
View file @ f44d7236
...@@ -16,7 +16,7 @@ Ext.application({ ...@@ -16,7 +16,7 @@ Ext.application({
], ],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel', views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel',
'SimulationList', 'LsmSimulationList'], 'SimulationList', 'LsmSimulationList', 'Chart'],
icon: { icon: {
57: 'resources/icons/Icon.png', 57: 'resources/icons/Icon.png',
......
www/app/view/Chart.js 0 → 100644
View file @ f44d7236
var drawComponent = new Ext.draw.Component({
items: [{
type: 'circle',
fill: '#79BB3F',
radius: 100,
x: 100,
y: 100
}]
});
Ext.define('app.view.Chart', {
extend: 'Ext.Panel',
xtype: 'chartpanel',
config: {
items: [drawComponent]
}
});
// (function(){
// var drawComponent = new Ext.draw.Component({
// items: [{
// type: 'circle',
// fill: '#79BB3F',
// radius: 100,
// x: 100,
// y: 100
// }]
// });
// new Ext.Panel({
// fullscreen: true,
// items: [drawComponent]
// });
// })();
www/app/view/List.js
View file @ f44d7236
...@@ -7,14 +7,11 @@ Ext.define("app.view.List", ...@@ -7,14 +7,11 @@ Ext.define("app.view.List",
extend: "Ext.navigation.View", extend: "Ext.navigation.View",
xtype: 'listpanel', xtype: 'listpanel',
requires: [ requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map' 'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
], ],
title: 'Simulations', title: 'Simulations',
config: { config: {
navigationBar: navigationBar:
{ {
title: 'simulations', title: 'simulations',
...@@ -29,15 +26,15 @@ Ext.define("app.view.List", ...@@ -29,15 +26,15 @@ Ext.define("app.view.List",
ui: ['square'], ui: ['square'],
}] }]
}, },
items: [ items: [
{ {
title: 'city\'s',
id: 'cities', id: 'cities',
xtype: 'list', xtype: 'list',
ui: 'round', ui: 'round',
itemTpl: '<div>{name}</div>', itemTpl: '<div>{name}</div>',
store: 'SimulationStore', store: 'SimulationStore',
}], }],
}, },
}); });
\ No newline at end of file
www/app/view/LsmSimulationList.js
View file @ f44d7236
...@@ -3,6 +3,7 @@ Ext.define('app.view.LsmSimulationList', { ...@@ -3,6 +3,7 @@ Ext.define('app.view.LsmSimulationList', {
xtype: 'LsmSimulationList', xtype: 'LsmSimulationList',
id: 'lsmsimulation-list', id: 'lsmsimulation-list',
config: { config: {
title: 'lsm',
store: 'LsmStore', store: 'LsmStore',
itemTpl: '{submitted}', itemTpl: '{submitted}',
} }
......
www/app/view/Main.js
View file @ f44d7236
...@@ -8,12 +8,14 @@ Ext.define("app.view.Main", { ...@@ -8,12 +8,14 @@ Ext.define("app.view.Main", {
items: [ items: [
{ {
xtype: 'listpanel', xtype: 'listpanel',
width: '20%', width: '20%',
style: 'border-right: 1px solid #373737', style: 'border-right: 1px solid #373737',
flex: 1, flex: 1,
}, },
{ {
//xtype: 'chartpanel',
xtype: 'simulationpanel', xtype: 'simulationpanel',
flex: 2 flex: 2
}], }],
......
www/app/view/SimulationList.js
View file @ f44d7236
...@@ -8,6 +8,7 @@ Ext.define('app.view.SimulationList', { ...@@ -8,6 +8,7 @@ Ext.define('app.view.SimulationList', {
scrollable: { scrollable: {
momentum: false momentum: false
}, },
title: 'Floods',
fullscreen: true, fullscreen: true,
store: 'SimulationsSummary', store: 'SimulationsSummary',
itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' + itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' +
......
www/app/view/StepsOverlay.js
View file @ f44d7236
...@@ -19,7 +19,7 @@ Ext.define('app.view.StepsOverlay', { ...@@ -19,7 +19,7 @@ Ext.define('app.view.StepsOverlay', {
direction:'right', direction:'right',
}, },
hidden: true, hidden: true,
width: 220, width: 220,
height: 130, height: 130,
scroll: false, scroll: false,
......
www/index.html
View file @ f44d7236
...@@ -122,6 +122,7 @@ ...@@ -122,6 +122,7 @@
</style> </style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
<script type="text/javascript" src="sdk/touch-charts-debug.js"></script>
</head> </head>
<body> <body>
<div id="appLoadingIndicator"> <div id="appLoadingIndicator">
......
www/resources/css/android.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/apple.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/bb6.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/chart-themes/AreaExample.css 0 → 100644
View file @ f44d7236
chart axis[position=left] grid even{opacity:1;fill:#ddd;stroke:#bbb;stroke-width:1}
www/resources/css/chart-themes/Base.css 0 → 100644
View file @ f44d7236
<<<<<<< HEAD
chart{colors:#115fa6 #94ae0a #a61120 #ff8809 #ffd13e #a61187 #24ad9a #7c7474 #a66111}chart axis{color:#354f6e;fill:#354f6e;stroke:#ccc;stroke-width:1}chart axis label{color:#354f6e;fill:#354f6e;font:12px Helvetica,Arial,sans-serif;font-weight:bold;spacing:2;padding:5}chart axis title{font:18px Helvetica,Arial,sans-serif;color:#354f6e;fill:#354f6e;padding:5}chart axis[position=left] title{rotate:0 0 270}chart axis[position=right] title{rotate:0 0 270}chart axis[position=radial]{fill:none}chart axis[position=radial] label{font:10px Helvetica,Arial,sans-serif;text-anchor:middle}chart axis[position=gauge]{fill:none}chart axis[position=gauge] label{font:10px Helvetica,Arial,sans-serif;text-anchor:middle}chart series{stroke-width:1}chart series label{font:12px Helvetica,Arial,sans-serif;fill:#333;display:none;field:name;minMargin:50;orientation:horizontal}chart series:nth-child(1){fill:#115fa6}chart series:nth-child(2){fill:#94ae0a}chart series:nth-child(3){fill:#a61120}chart series:nth-child(4){fill:#ff8809}chart series:nth-child(5){fill:#ffd13e}chart series:nth-child(6){fill:#a61187}chart series:nth-child(7){fill:#24ad9a}chart series:nth-child(8){fill:#7c7474}chart series:nth-child(9){fill:#a66111}chart marker{stroke:#fff;stroke-width:1;type:circle;fill:#000;radius:5;size:5}chart marker:nth-child(1){fill:#115fa6;type:circle}chart marker:nth-child(2){fill:#94ae0a}chart marker:nth-child(3){fill:#a61120}chart marker:nth-child(3){fill:#a61120}chart marker:nth-child(4){fill:#ff8809}chart marker:nth-child(5){fill:#ffd13e}chart marker:nth-child(6){fill:#a61187}chart marker:nth-child(7){fill:#24ad9a}chart marker:nth-child(8){fill:#7c7474}chart marker:nth-child(9){fill:#a66111}chart interaction[type=piegrouping] slice{stroke:#0d75f2;stroke-width:2;fill:#0d75f2;opacity:0.5}chart interaction[type=piegrouping] handle{stroke:#0d75f2;stroke-width:2;fill:#0d75f2}
=======
chart{colors:#115fa6 #94ae0a #a61120 #ff8809 #ffd13e #a61187 #24ad9a #7c7474 #a66111}chart axis{color:#354f6e;fill:#354f6e;stroke:#cccccc;stroke-width:1}chart axis label{color:#354f6e;fill:#354f6e;font:12px Helvetica, Arial, sans-serif;font-weight:bold;spacing:2;padding:5}chart axis title{font:18px Helvetica, Arial, sans-serif;color:#354f6e;fill:#354f6e;padding:5}chart axis[position=left] title{rotate:0 0 270}chart axis[position=right] title{rotate:0 0 270}chart axis[position=radial]{fill:none}chart axis[position=radial] label{font:10px Helvetica, Arial, sans-serif;text-anchor:middle}chart axis[position=gauge]{fill:none}chart axis[position=gauge] label{font:10px Helvetica, Arial, sans-serif;text-anchor:middle}chart series{stroke-width:1}chart series label{font:12px Helvetica, Arial, sans-serif;fill:#333;display:none;field:name;minMargin:50;orientation:horizontal}chart series:nth-child(1){fill:#115fa6}chart series:nth-child(2){fill:#94ae0a}chart series:nth-child(3){fill:#a61120}chart series:nth-child(4){fill:#ff8809}chart series:nth-child(5){fill:#ffd13e}chart series:nth-child(6){fill:#a61187}chart series:nth-child(7){fill:#24ad9a}chart series:nth-child(8){fill:#7c7474}chart series:nth-child(9){fill:#a66111}chart marker{stroke:#fff;stroke-width:1;type:circle;fill:#000;radius:5;size:5}chart marker:nth-child(1){fill:#115fa6;type:circle}chart marker:nth-child(2){fill:#94ae0a}chart marker:nth-child(3){fill:#a61120}chart marker:nth-child(3){fill:#a61120}chart marker:nth-child(4){fill:#ff8809}chart marker:nth-child(5){fill:#ffd13e}chart marker:nth-child(6){fill:#a61187}chart marker:nth-child(7){fill:#24ad9a}chart marker:nth-child(8){fill:#7c7474}chart marker:nth-child(9){fill:#a66111}chart interaction[type=itemcompare] circle{fill:#faa;stroke:#000;radius:5}chart interaction[type=itemcompare] line{stroke:#000;stroke-width:3}chart interaction[type=itemcompare] arrow{fill:#000;radius:8}chart interaction[type=piegrouping] slice{stroke:#0099ff;stroke-width:2;fill:#0099ff;opacity:0.5}chart interaction[type=piegrouping] handle{stroke:#0099ff;stroke-width:2;fill:#0099ff}
>>>>>>> dc64e02f235a532fb0b0649ab1bcc08856972235
www/resources/css/chart-themes/Demo.css 0 → 100644
View file @ f44d7236
chart[cls=area1] axis[position=left] grid even{opacity:1;fill:#ddd;stroke:#bbb;stroke-width:1}chart[cls=area1] axis[position=bottom] label{rotate:45}chart[cls=area1] series{opaciy:0.93}chart[cls=bar1] axis[position=bottom] grid{stroke:#ccc}chart[cls=column1]{background:#111}chart[cls=column1] axis{stroke:#eee;fill:#eee}chart[cls=column1] axis label{fill:#fff}chart[cls=column1] axis title{fill:#fff}chart[cls=column1] axis[position=left] grid odd{stroke:#555}chart[cls=column1] axis[position=left] grid even{stroke:#555}chart[cls=column1] series label{fill:#fff;font:17px Arial;display:insideEnd;text-anchor:middle;orientation:horizontal}chart[cls=barcombo1] axis[position=bottom] grid{stroke:#ccc}chart[cls=piecombo1]{padding:20}chart[cls=piecombo1] series label{display:rotate;contrast:true;font:14px Arial}chart[cls=gaugecombo1]{padding:30}chart[cls=gaugecombo1] axis{stroke:#ccc}chart[cls=gaugecombo1] axis label{font:15px Arial}chart[cls=radarcombo1]{padding:20}chart[cls=radarcombo1] axis{stroke:#ccc;fill:none}chart[cls=radarcombo1] axis label{font:11px Arial;text-anchor:middle}chart[cls=radarcombo1] series{opacity:0.4}chart[cls=linecombo1]{padding:20}chart[cls=linecombo1] axis[position=left] grid{stroke:#ccc}chart[cls=linecombo1] marker{size:4;radius:4;stroke-width:0}chart[cls=linecombo1] series:nth-child(1) marker{type:cross}chart[cls=linecombo1] series:nth-child(2) marker{type:circle}chart[cls=linecombo1] series:nth-child(3) marker{type:circle}chart[cls=line1] axis[position=left] grid odd{opacity:1;fill:#ddd;stroke:#bbb;stroke-width:0.5}chart[cls=pie1]{padding:10}chart[cls=pie1] series label{display:rotate;contrast:true;font:24px Helvetica, Arial, sans-serif}chart[cls=radar1]{padding:20}chart[cls=radar1] axis{stroke:#ccc;fill:none}chart[cls=radar1] axis label{font:11px Arial;text-anchor:middle}chart[cls=radar1] series{opacity:0.4}chart[cls=scatter1]{padding:40}chart[cls=scatter1] axis[position=left] grid odd{opacity:1;fill:#ddd;stroke:#bbb;stroke-width:0.5}chart[cls=scatter1] marker{size:8;radius:8}chart[cls=stock1] axis label{font:12px Arial}chart[cls=stock1] axis[position=left] grid{stroke:#ccc}chart[cls=stock1] axis[position=bottom] grid{stroke:#ccc}
www/resources/css/chart-themes/Energy.css 0 → 100644
View file @ f44d7236
chart{colors:linear-gradient(45, #d42828,#750e0e) linear-gradient(45, #b4d82a,#5e720d) linear-gradient(45, #2bdd73,#0e7538) linear-gradient(45, #2d75e2,#0e3875) linear-gradient(45, #bb2dde,#550a67);background:linear-gradient(45, #444444,#111111)}chart series{stroke-width:2}chart series:nth-child(1){fill:linear-gradient(0, #d42828,#750e0e)}chart series:nth-child(2){fill:linear-gradient(0, #b4d82a,#5e720d)}chart series:nth-child(3){fill:linear-gradient(0, #2bdd73,#0e7538)}chart series:nth-child(4){fill:linear-gradient(0, #2d75e2,#0e3875)}chart series:nth-child(5){fill:linear-gradient(0, #bb2dde,#550a67)}chart axis{stroke:#555;fill:#555}chart axis label{fill:#eee}chart axis title{fill:#eee}
www/resources/css/chart-themes/Fancy.css 0 → 100644
View file @ f44d7236
chart{colors:linear-gradient(45, #d42828,#750e0e) linear-gradient(45, #b4d82a,#5e720d) linear-gradient(45, #2bdd73,#0e7538) linear-gradient(45, #2d75e2,#0e3875) linear-gradient(45, #bb2dde,#550a67);background:#111}chart axis{stroke:#eee;fill:#eee}chart axis label{fill:#eee}chart axis title{fill:#eee}
www/resources/css/energy-demo.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/sencha-touch.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/touch-charts-demo.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/touch-charts-full.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/css/touch-charts.css 0 → 100644
View file @ f44d7236
This diff is collapsed.
www/resources/css/worlddata.css 0 → 100644
View file @ f44d7236
This source diff could not be displayed because it is too large. You can view the blob instead.
www/resources/sass/chart-themes/_Base.scss 0 → 100644
View file @ f44d7236
@import 'include/variables';
chart {
padding: 10;
colors: rgba($chart-blue, $default-fill-alpha) rgba($chart-green, $default-fill-alpha) rgba($chart-red, $default-fill-alpha) rgba($chart-orange, $default-fill-alpha) rgba($chart-yellow, $default-fill-alpha) rgba($chart-purple, $default-fill-alpha) rgba($chart-teal, $default-fill-alpha) rgba($chart-grey, $default-fill-alpha) rgba($chart-brown, $default-fill-alpha);
axis {
@include readable-color($base-color, 30);
stroke: $axis-stroke-color;
stroke-width: 1;
label {
@include readable-color($base-color, 10);
font: 12px $font-family;
font-weight: bold;
spacing: 2;
padding: 5;
}
title {
font: 18px $font-family;
@include readable-color($base-color);
padding: 5;
}
&[position=left] {
title {
rotate: 0 0 270;
}
}
&[position=right] {
title {
rotate: 0 0 270;
}
}
&[position=radial] {
label {
font: 10px $font-family;
text-anchor: middle;
}
fill: none;
}
&[position=gauge] {
label {
font: 10px $font-family;
text-anchor: middle;
}
fill: none;
}
}
series {
stroke-width: 1;
label {
font: 12px $font-family;
fill: #333;
display: none;
field: name;
minMargin: 50;
orientation: horizontal;
}
&:nth-child(1) {
fill: $chart-blue;
}
&:nth-child(2) {
fill: $chart-green;
}
&:nth-child(3) {
fill: $chart-red;
}
&:nth-child(4) {
fill: $chart-orange;
}
&:nth-child(5) {
fill: $chart-yellow;
}
&:nth-child(6) {
fill: $chart-purple;
}
&:nth-child(7) {
fill: $chart-teal;
}
&:nth-child(8) {
fill: $chart-grey;
}
&:nth-child(9) {
fill: $chart-brown;
}
&:highlight {
radius: 20;
stroke-width: 5;
stroke: #f55;
zIndex: 100;
}
}
series[type=line] {
&:highlight {
stroke-width: 3;
}
}
series[type=bar] {
&:highlight {
stroke-width: 3;
stroke: #55c;
opacity: 0.8;
}
}
series[type=area] {
&:highlight {
stroke-width: 3;
stroke: #111;
}
}
series[type=pie] {
&:highlight {
stroke: none;
stroke-width: 0;
}
}
series[type=scatter] {
&:highlight {
stroke: none;
stroke-width: 0;
}
}
marker {
stroke: #fff;
stroke-width: 1;
type: circle;
fill: #000;
radius: 5;
size: 5;
&:nth-child(1) {
fill: $chart-blue;
type: circle;
}
&:nth-child(2) {
fill: $chart-green;
/* type: cross;*/
}
&:nth-child(3) {
fill: $chart-red;
/* type: plus;*/
}
&:nth-child(3) {
fill: $chart-red;
}
&:nth-child(4) {
fill: $chart-orange;
}
&:nth-child(5) {
fill: $chart-yellow;
}
&:nth-child(6) {
fill: $chart-purple;
}
&:nth-child(7) {
fill: $chart-teal;
}
&:nth-child(8) {
fill: $chart-grey;
}
&:nth-child(9) {
fill: $chart-brown;
}
}
/* interaction[type=]*/
interaction {
&[type=itemcompare] {
circle {
fill: rgba(#000, 0);
stroke: $pie-grouping-color;
radius: 5;
}
line {
stroke: $pie-grouping-color;
stroke-width: 3;
}
arrow {
fill: $pie-grouping-color;
radius: 8;
}
}
&[type=piegrouping] {
slice {
stroke: $pie-grouping-color;
stroke-width: 2;
fill: $pie-grouping-color;
opacity: 0.5;
}
handle {
stroke: $pie-grouping-color;
stroke-width: 2;
fill: $pie-grouping-color;
}
}
}
}
www/resources/sass/chart-themes/_Demo.scss 0 → 100644
View file @ f44d7236
chart[themeCls=area1] {
axis {
&[position=left] {
grid {
even {
opacity: 1;
fill: #ddd;
stroke: #bbb;
stroke-width: 1;
}
}
}
&[position=bottom] {
label {
rotate: 45;
}
}
}
series {
opaciy: 0.93;
}
}
chart[themeCls=bar1] {
axis {
&[position=bottom] {
grid {
stroke: #ccc;
}
}
}
}
chart[themeCls=column1] {
background: #111;
axis {
stroke: #eee;
fill: #eee;
label {
fill: #fff;
}
title {
fill: #fff;
}
&[position=left] {
grid {
odd {
stroke: #555;
}
even {
stroke: #555;
}
}
}
}
series {
label {
fill: #fff;
font: 17px Arial;
display: insideEnd;
text-anchor: middle;
orientation: horizontal;
}
}
}
chart[themeCls=barcombo1] {
axis[position=bottom] {
grid {
stroke: #ccc;
}
}
}
chart[themeCls=piecombo1] {
padding: 20;
series {
label {
display: rotate;
contrast: true;
font: 14px Arial;
}
}
}
chart[themeCls=gaugecombo1] {
padding: 30;
axis {
label {
font: 15px Arial;
}
stroke: #ccc;
}
}
chart[themeCls=radarcombo1] {
padding: 20;
axis {
label {
font: 11px Arial;
text-anchor: middle;
}
stroke: #ccc;
fill: none;
}
series {
opacity: 0.4;
}
}
chart[themeCls=line1] {
axis[position=left] {
grid {
odd {
opacity: 1;
fill: #ddd;
stroke: #bbb;
stroke-width: 0.5;
}
}
}
marker {
size: 4;
radius: 4;
stroke-width: 0;
}
series {
&:nth-child(1) {
marker {
type: image;
height: 46;
width: 46;
src: "../resources/shared/img/iphone.png";
}
}
&:nth-child(2) {
marker {
type: image;
height: 46;
width: 46;
src: "../resources/shared/img/android.png";
}
}
&:nth-child(3) {
marker {
type: image;
height: 46;
width: 46;
src: "../resources/shared/img/ipad.png";
}
}
}
}
chart[themeCls=pie1] {
padding: 10;
series {
label {
display: rotate;
contrast: true;
font: 18px Helvetica, Arial, sans-serif;
}
}
}
chart[themeCls=radar1] {
padding: 20;
axis {
label {
font: 11px Arial;
text-anchor: middle;
}
stroke: #ccc;
fill: none;
}
series {
opacity: 0.4;
}
}
chart[themeCls=scatter1] {
padding: 40;
axis[position=left] {
grid {
odd {
opacity: 1;
fill: #ddd;
stroke: #bbb;
stroke-width: 0.5;
}
}
}
marker {
size: 8;
radius: 8;
}
}
chart[themeCls=stock1] {
axis {
label {
font: 12px Arial;
}
&[position=left] {
grid {
stroke: #ccc;
}
}
}
}
www/resources/sass/chart-themes/_Energy.scss 0 → 100644
View file @ f44d7236
$default-fill-alpha: .85;
@import 'include/variables';
chart {
colors: rgba($chart-blue, $default-fill-alpha) rgba($chart-green, $default-fill-alpha) rgba($chart-red, $default-fill-alpha) rgba($chart-orange, $default-fill-alpha) rgba($chart-yellow, $default-fill-alpha) rgba($chart-purple, $default-fill-alpha) rgba($chart-teal, $default-fill-alpha) rgba($chart-grey, $default-fill-alpha) rgba($chart-brown, $default-fill-alpha);
series {
stroke-width: 2;
grid {
odd {
stroke: #333;
}
even {
stroke: #222;
}
}
}
axis {
stroke: #555;
fill: #555;
label {
fill: #666;
}
title {
fill: #ccc;
}
}
axis[position=radial] {
fill: none;
label {
fill: #fff;
text-anchor: center;
translate: 0 -10;
}
}
}
chart[themeCls=radar] {
padding: 40;
series {
opacity: 0.4;
}
}
www/resources/sass/chart-themes/_WorldData.scss 0 → 100644
View file @ f44d7236
@import 'include/variables';
$base-color: #5D6056;
$text-color: lighten($base-color, 20%);
$title-color: darken($base-color, 10%);
$stroke-color: lighten($base-color, 40%);
chart {
colors: darken($chart-red, 20%) darken($chart-red, 20%) darken($chart-yellow, 20%);
background: lighten($base-color, 50%);
series {
&:highlight {
radius: 5;
stroke-width: 3;
stroke: #fff;
}
}
axis {
stroke: $stroke-color;
fill: $stroke-color;
grid {
stroke: $stroke-color;
}
/* &[position="bottom"] {
label {
rotate: 270;
}
}*/
label {
fill: $text-color;
}
title {
fill: $title-color;
}
}
}
www/resources/sass/chart-themes/include/_variables.scss 0 → 100644
View file @ f44d7236
@import '../../../themes/stylesheets/touch-charts/default/variables';
@import '../../../themes/stylesheets/touch-charts/default/mixins';
$font-family: 'Helvetica', 'Arial', 'sans-serif' !default;
$chart-blue: #115fa6 !default;
$chart-green: #94ae0a !default;
$chart-red: #a61120 !default;
$chart-orange: #ff8809 !default;
$chart-yellow: #ffd13e !default;
$chart-purple: #a61187 !default;
$chart-teal: #24ad9a !default;
$chart-grey: #7c7474 !default;
$chart-brown: #a66111 !default;
$charts-active-color: hsla(hue($active-color), saturation($active-color), 50, 1) !default;
$pie-grouping-color: $charts-active-color !default;
$axis-stroke-color: #ccc;
/*$grid-stroke-color: */
$text-color: #666 !default;
$title-color: #333 !default;
$default-fill-alpha: 1 !default;
$default-stroke-alpha: 1 !default;
\ No newline at end of file
www/resources/sass/energy-demo.scss 0 → 100644
View file @ f44d7236
// Base Sencha Touch stylesheets
$base-color: #444;
$active-color: #111;
$list-bg-color: #161616;
$list-color: #ccc;
$list-pressed-color: darken($active-color, 50%) !default;
$legend-background-color: #111;
$legend-border-color: #000;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
/*@include sencha-sheet;*/
/*@include sencha-picker;*/
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
/*@include sencha-carousel;*/
/*@include sencha-indexbar;*/
@include sencha-list;
/*@include sencha-list-paging;*/
/*@include sencha-list-pullrefresh;*/
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
// @import Touch charts
@import 'touch-charts';
// Some custom styles
.x-nested-list.x-docked-left {
border-right: 1px solid #000;
}
.x-list .x-list-item.x-item-selected {
font-weight: bold;
}
.yearlabel {
font-size: 24px;
font-weight: light;
color: #ddd;
padding: 12px;
}
.x-toolbar-dark .x-title {
font-family: Orbitron, Helvetica, sans-serif;
font-weight: 600 !important;
@include text-shadow(#999 0 0 3px);
text-transform: uppercase;
font-size: 1em;
line-height: 2.8em;
color: rgba(#fff, .9);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.launchscreen > .x-inner {
font-family: Orbitron, Helvetica, sans-serif;
background-color: #111;
@include display-box;
@include box-orient(vertical);
@include box-align(center);
@include box-pack(center);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
& > div {
width: 70%;
text-align: center;
font-size: 18px;
line-height: 28px;
color: #666;
text-shadow: #222 0 0 25px;
}
p {
font-weight: 400;
font-size: 26px;
line-height: 34px;
strong {
color: #fff;
}
}
}
.chartpanel {
@include background(linear-gradient(top, #333, #060606));
.x-legend-item {
color: #fff;
}
}
\ No newline at end of file
www/resources/sass/touch-charts-demo.scss 0 → 100644
View file @ f44d7236
$include-default-icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include pictos-iconmask('shuffle');
@include pictos-iconmask('help');
@include sencha-tabbar-ui('light', #222, 'matte', lighten($base-color, 20%));
.x-tabbar-dark.x-docked-bottom .x-tab-active {
@include box-shadow(#000 0 0 10px inset, rgba(#fff, .2) 0 1px 0);
@include background-gradient(darken($base-color, 30%), recessed);
}
@import 'touch-charts';
\ No newline at end of file
www/resources/sass/touch-charts-full.scss 0 → 100644
View file @ f44d7236
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-carousel;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@import 'touch-charts';
www/resources/sass/touch-charts.scss 0 → 100644
View file @ f44d7236
@import 'compass/css3';
@import 'touch-charts/default/all';
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include touch-charts-draw;
@include touch-charts-chart;
@include touch-charts-toolbar;
@include touch-charts-panzoom;
@include touch-charts-legend;
www/resources/sass/worlddata.scss 0 → 100644
View file @ f44d7236
$base-color: #5d6056;
$active-color: #818A68;
$list-bg-color: #f3f4f0;
$include-default-icons: false;
@import 'sencha-touch/default/all';
@include sencha-panel;
@include sencha-sheet;
@include sencha-buttons;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-list;
@include sencha-layout;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@import 'touch-charts/default/all';
@include touch-charts-draw;
@include touch-charts-chart;
@include touch-charts-toolbar;
@include touch-charts-panzoom;
@include touch-charts-legend;
@include pictos-iconmask('info');
div {
font-family: 'Maven Pro', sans-serif;
font-weight:normal!important;
}
\ No newline at end of file
www/resources/themes/stylesheets/touch-charts/default/_all.scss 0 → 100644
View file @ f44d7236
@import 'variables';
@import 'mixins';
@import 'draw';
@import 'chart';
@import 'toolbar';
@import 'legend';
@import 'panzoom';
@import 'tabs';
\ No newline at end of file
www/resources/themes/stylesheets/touch-charts/default/_chart.scss 0 → 100644
View file @ f44d7236
@mixin touch-charts-chart {
.x-spark {
position: relative;
}
}
\ No newline at end of file
www/resources/themes/stylesheets/touch-charts/default/_draw.scss 0 → 100644
View file @ f44d7236
@mixin touch-charts-draw {
.x-android-3 .x-surface-wrap, .x-android-3 .x-surface-wrap > * {
-webkit-perspective: 1;
}
.x-surface-wrap > * {
position: relative;
-webkit-transform: matrix(1,0,0,1,0,0);
}
.ext-surface, .x-draw-component {
position: relative;
}
}
\ No newline at end of file
www/resources/themes/stylesheets/touch-charts/default/_legend.scss 0 → 100644
View file @ f44d7236
$theme-name: 'default'; /*TODO how to get this from the touch variables?*/
$legend-border-color: #ccc !default;
$legend-border: 1px solid $legend-border-color !default;
$legend-background-color: #fff !default;
$legend-z-index: 10 !default;
$legend-item-border: 1px solid rgba($legend-border-color, .5) !default;
$legend-item-background: rgba(#fff, 0) !default;
$marker-size: .8em !default;
@mixin touch-charts-legend {
.x-legend {
z-index: $legend-z-index;
border: $legend-border;
background: $legend-background-color;
overflow: hidden;
position: absolute;
@include border-radius(5px);
@if (lightness($legend-background-color) > 30) {
@include box-shadow(rgba(#fff, .6) 0 1px 1px);
} @else {
@include box-shadow(rgba(#fff, .2) 0 1px 0);
}
.x-legend-item {
padding: .8em 1em .8em $marker-size + 1em;
@include readable-color($base-color, 50);
background: $legend-item-background;
max-width: 20em;
min-width: 8em;
font-size: 14px;
line-height: 14px;
font-weight: bold;
position: relative;
.x-legend-item-marker {
width: $marker-size;
height: $marker-size;
@include border-radius($marker-size/2);
@include box-shadow(rgba(#fff, .3) 0 1px 0, rgba(#000, .4) 0 1px 0 inset);
position: absolute;
left: .7em;
top: 1em;
}
&:last-child {
border: 0;
}
&.x-dragging {
@include box-shadow(darken($legend-background-color, 50) 0 0 .5em);
}
&.x-drop-hover {
@include box-shadow(rgba(0, 0, 200, 0.9), 0, 0, .3em, 0, true);
}
}
.x-legend-inactive {
@include opacity(.3);
}
&.x-legend-horizontal {
.x-legend-inner > * {
display: -webkit-box;
@include box-orient(horizontal);
padding: 0 .4em;
}
.x-legend-item {
border: 0;
border-right: $legend-item-border;
white-space: nowrap;
max-width: none;
min-width: 0;
&:last-child {
border: 0;
}
}
}
}
.x-legend-button-icon {
-webkit-mask-image: theme-image($theme-name, 'pictos/list.png');
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment