Skip to content
This repository has been archived by the owner on Jul 9, 2024. It is now read-only.

Commit

Permalink
chore(charts): Less padding/margin around charts.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mjschranz
mjschranz committed Jun 3, 2015
1 parent cbb3d58 commit c09ee5b
Show file tree
Hide file tree
Showing 4 changed files with 62 additions and 45 deletions.
74 changes: 49 additions & 25 deletions app/scripts/components/charts/chart.directives.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
module ngApp.components.charts {
import IGDCWindowService = ngApp.core.models.IGDCWindowService;
import ILocationService = ngApp.components.location.services.ILocationService;

interface IDonutChartScope extends ng.IScope {
data: any;
Expand All @@ -9,7 +10,7 @@ module ngApp.components.charts {
}

/* @ngInject */
function PieChart($window: IGDCWindowService, $state: ng.ui.IStateService): ng.IDirective {
function PieChart($window: IGDCWindowService, LocationService: ILocationService): ng.IDirective {
return {
restrict: "EA",
replace: true,
Expand Down Expand Up @@ -61,8 +62,7 @@ module ngApp.components.charts {
var config = $scope.config;

var color = d3.scale.category20();
var outerRadius = height / 2 - 20,
cornerRadius = 10;
var outerRadius = height / 2 + 10;

var pie = d3.layout.pie()
.sort(null)
Expand Down Expand Up @@ -110,7 +110,7 @@ module ngApp.components.charts {
.attr("state", function(d) {
return config.state ? "true" : "false";
})
.on("click", goToState)
.on("click", setFilters)
.on("mouseover.text", function(d) {
$scope.showDefault = false;
$scope.hoverKey = d.data.key;
Expand All @@ -132,29 +132,55 @@ module ngApp.components.charts {
$scope.legendData = legendData;

if (data.length > 1) {
gPath.on("mouseover.tween", arcTween(outerRadius - 10, 0))
gPath.on("mouseover.tween", arcTween(outerRadius - 15, 0))
.on("mouseout.tween", arcTween(outerRadius - 20, 150));
}

function goToState(d) {
if (!config.state || (!config.state[d.data.key] &&
!config.state["default"])) {
function setFilters(d) {
var params;

if (!config.filters || (!config.filters[d.data.key] &&
!config.filters["default"])) {
return;
}

if (config.state[d.data.key]) {
var state = config.state[d.data.key];
if (config.filters[d.data.key]) {
var filters = config.filters[d.data.key];
params = filters.params;
} else {
params = {
filters: config.filters["default"].params.filters(d.data.key)
};
}

$state.go(state.name, state.params, {inherit: false});
return;
var filters = LocationService.filters();

if (!filters.content) {
filters.content = [];
filters.op = "and";
}

var state = config.state["default"],
params = {
filters: state.params.filters(d.data.key)
};
var newFilters = angular.fromJson(params.filters);

_.forEach(newFilters.content, (filter) => {
var oldFilter = _.find(filters.content, (oFilter) => {
return oFilter.content.field === filter.content.field;
});

$state.go(state.name, params, {inherit: false});
if (oldFilter) {
// Playing with the idea that if attempting to add the exact same
// value then we should remove it as a "reverse"
if (!_.isEqual(oldFilter.content.value, filter.content.value)) {
oldFilter.content.value.concat(filter.content.value);
} else {
filters.content.splice(filters.content.indexOf(filter), 1);
}
} else {
filters.content.push(filter);
}
});

LocationService.setFilters(filters);
}

function arcTween(outerRadius, delay) {
Expand Down Expand Up @@ -224,16 +250,12 @@ module ngApp.components.charts {
$scope.displayedData = $scope.data.data.slice(0, 10);

_.defer(() => {
var top;
var top = 0;

if (elem.height() < $scope.data.parent.height()) {
top = ($scope.data.parent.height() - elem.height()) / 2;
}

if (elem.height() > $scope.data.parent.height()) {
top = 0;
}

elem.css("top", top + "px");

calculateLeft(elem, $scope.data.parent.find(".chart-container"));
Expand All @@ -244,8 +266,10 @@ module ngApp.components.charts {
}
}

angular.module("components.charts", [])
.directive("chartLegend", ChartLegend)
.directive("pieChart", PieChart);
angular.module("components.charts", [
"location.services"
])
.directive("chartLegend", ChartLegend)
.directive("pieChart", PieChart);
}

2 changes: 1 addition & 1 deletion app/scripts/components/charts/templates/chart-legend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ <h4 class="panel-title">{{ data.title | translate }}</h4>
<table class="table table-striped table-hover table-condensed table-bordered">
<thead>
<tr>
<th></th>
<th><span data-ng-if="displayedData.length === 10" data-translate>Top 10</span></th>
<th data-translate>Files</th>
<th data-translate>File Size</th>
</tr>
Expand Down
19 changes: 6 additions & 13 deletions app/scripts/search/search.services.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "project",
pluralDefaultText: "projects",
state: {
filters: {
"default": {
name: "search.files",
params: {
filters: function(value) {
return $filter("makeFilter")([
Expand All @@ -109,9 +108,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "primary site",
pluralDefaultText: "primary sites",
state: {
filters: {
"default": {
name: "search.files",
params: {
filters: function(value) {
return $filter("makeFilter")([
Expand All @@ -131,9 +129,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "access level",
pluralDefaultText: "access levels",
state: {
filters: {
open: {
name: "search.files",
params: {
filters: $filter("makeFilter")([
{
Expand All @@ -150,7 +147,6 @@ module ngApp.search.services {
}
},
"protected": {
name: "search.files",
params: {
filters: $filter("makeFilter")([
{
Expand All @@ -172,9 +168,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "data type",
pluralDefaultText: "data types",
state: {
filters: {
"default": {
name: "search.files",
params: {
filters: function(value) {
return $filter("makeFilter")([
Expand All @@ -194,9 +189,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "data format",
pluralDefaultText: "data formats",
state: {
filters: {
"default": {
name: "search.files",
params: {
filters: function(value) {
return $filter("makeFilter")([
Expand All @@ -216,9 +210,8 @@ module ngApp.search.services {
sortKey: "doc_count",
defaultText: "experimental strategy",
pluralDefaultText: "experimental strategies",
state: {
filters: {
"default": {
name: "search.files",
params: {
filters: function(value) {
return $filter("makeFilter")([
Expand Down
12 changes: 6 additions & 6 deletions app/scripts/search/templates/search.summary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,32 +22,32 @@
<div class="row">
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.participants['participants.project.project_id'].buckets"
height="300" config="sc.chartConfigs.projectIdChartConfig"
height="250" config="sc.chartConfigs.projectIdChartConfig"
data-title="File Counts by Project"></pie-chart>
</div>
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.participants['participants.project.primary_site'].buckets"
height="300" config="sc.chartConfigs.primarySiteChartConfig"
height="250" config="sc.chartConfigs.primarySiteChartConfig"
data-title="File Counts by Primary Site"></pie-chart>
</div>
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.access.buckets"
height="300" config="sc.chartConfigs.accessChartConfig"
height="250" config="sc.chartConfigs.accessChartConfig"
data-title="File Counts by Access Level"></pie-chart>
</div>
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.data_type.buckets"
height="300" config="sc.chartConfigs.dataTypeChartConfig"
height="250" config="sc.chartConfigs.dataTypeChartConfig"
data-title="File Counts by Data Type"></pie-chart>
</div>
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.data_format.buckets"
height="300" config="sc.chartConfigs.dataFormatChartConfig"
height="250" config="sc.chartConfigs.dataFormatChartConfig"
data-title="File Counts by Data Format"></pie-chart>
</div>
<div class="col-lg-4 col-sm-6">
<pie-chart data="sc.summary.experimental_strategy.buckets"
height="300" config="sc.chartConfigs.expStratChartConfig"
height="250" config="sc.chartConfigs.expStratChartConfig"
data-title="File Counts by Experimental Strategy"></pie-chart>
</div>
</div>

0 comments on commit c09ee5b

Please sign in to comment.