Skip to content

Hover refactor (work in progress) #134

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

Merged
merged 13 commits into from
Dec 19, 2012
Merged

Hover refactor (work in progress) #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9bdabf1
first version of hover refactored to be 100% html
Nov 18, 2012
a8ca88e
Merge branch 'morris-hover' of https://github.com/tiraeth/morris.js i…
oesmith Dec 2, 2012
cf9d10b
Merge branch 'master' into html-hover
oesmith Dec 3, 2012
e8c6ba8
WIP: re-organising.
oesmith Dec 4, 2012
8080000
Merge branch 'master' into html-hover
oesmith Dec 4, 2012
6787fa7
WIP: HTML hover refactor.
oesmith Dec 7, 2012
e0691b9
Smarter hover placement.
oesmith Dec 11, 2012
77ee046
WIP: connecting hover object to grid subclasses.
oesmith Dec 11, 2012
7ea84dd
Hover element for line charts (still needs refactoring...)
oesmith Dec 13, 2012
5a31ded
Getting there... (for line charts, at least).
oesmith Dec 14, 2012
d308cb0
Hover in bar charts.
oesmith Dec 17, 2012
a23eb07
hoverCallback option.
oesmith Dec 19, 2012
a620eec
Fix hover position for area charts.
oesmith Dec 19, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/area.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Area charts</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/bar-colors.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Bar charts</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Bar charts</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/days.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates YYYY-MM-DD</h1>
Expand Down
7 changes: 6 additions & 1 deletion examples/decimal.html → examples/decimal-custom-hover.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Decimal Data</h1>
Expand All @@ -25,7 +26,11 @@ <h1>Decimal Data</h1>
xkey: 'x',
ykeys: ['y'],
labels: ['sin(x)'],
parseTime: false
parseTime: false,
hoverCallback: function (index, options) {
var row = options.data[index];
return "sin(" + row.x + ") = " + row.y;
}
});
</pre>
</body>
1 change: 1 addition & 0 deletions examples/donut-formatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Donut Chart</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/donut.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Donut Chart</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/events.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Time Events</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/goals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Value Goals</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/months-no-smooth.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates with YYYY-MM</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/negative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Negative values</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/non-continuous.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Non-continuous data</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/non-date.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Non-date Arbitrary X-axis</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/quarters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates with Quarters</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/staked_bars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Stacked Bars chart</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/timestamps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Timestamps</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/updating.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Updating data</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/weeks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates With Weeks</h1>
Expand Down
1 change: 1 addition & 0 deletions examples/years.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<script src="lib/example.js"></script>
<link rel="stylesheet" href="lib/example.css">
<link rel="stylesheet" href="lib/prettify.css">
<link rel="stylesheet" href="../morris.css">
</head>
<body>
<h1>Formatting Dates YYYY</h1>
Expand Down
15 changes: 13 additions & 2 deletions grunt.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,23 @@ module.exports = function (grunt) {
'build/morris.coffee': [
'lib/morris.coffee',
'lib/morris.grid.coffee',
'lib/morris.hover.coffee',
'lib/morris.line.coffee',
'lib/morris.area.coffee',
'lib/morris.bar.coffee',
'lib/morris.donut.coffee'
],
'build/spec.coffee': ['spec/support/**/*.coffee', 'spec/lib/**/*.coffee']
},
less: {
all: {
src: 'less/*.less',
dest: 'morris.css',
options: {
compress: true
}
}
},
min: {
'morris.min.js': 'morris.js'
},
Expand All @@ -33,13 +43,14 @@ module.exports = function (grunt) {
}
},
watch: {
files: ['lib/**/*.coffee', 'spec/lib/**/*.coffee', 'spec/support/**/*.coffee'],
files: ['lib/**/*.coffee', 'spec/lib/**/*.coffee', 'spec/support/**/*.coffee', 'less/**/*.less'],
tasks: 'default'
}
});

grunt.loadNpmTasks('grunt-coffee');
grunt.loadNpmTasks('grunt-mocha');
grunt.loadNpmTasks('grunt-less');

grunt.registerTask('default', 'concat coffee min mocha');
grunt.registerTask('default', 'concat coffee less min mocha');
};
27 changes: 27 additions & 0 deletions less/morris.core.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.morris-hover {
position: absolute;
z-index: 1000;

&.morris-default-style {
border-radius: 10px;
padding: 6px;
color: #666;
background: rgba(255, 255, 255, 0.8);
border: solid 2px rgba(230, 230, 230, 0.8);

font-family: sans-serif;
font-size: 12px;
text-align: center;

.morris-hover-row-label {
font-weight: bold;
margin: 0.25em 0;
}

.morris-hover-point {
white-space: nowrap;
margin: 0.1em 0;
}
}

}
3 changes: 2 additions & 1 deletion lib/morris.area.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ class Morris.Area extends Morris.Line
row._y = for y in row.y
total += (y || 0)
@transY(total)
row._ymax = row._y[row._y.length - 1]

# draw the data series
#
Expand All @@ -31,7 +32,7 @@ class Morris.Area extends Morris.Line
super()

fillForSeries: (i) ->
color = Raphael.rgb2hsl @colorForSeries(i)
color = Raphael.rgb2hsl @colorFor(@data[i], i, 'line')
Raphael.hsl(
color.h,
Math.min(255, color.s * 0.75),
Expand Down
Loading